从选择中删除选项使用javascript

Question

我有一个下拉菜单，其中包含使用php从数据库填充的选项。我为每个选项创建了一个显示按钮，以在下拉菜单中显示。每个按钮都会调用移除选项功能并传递其值。我试图从下拉列表中删除选项，当其中一个按钮被点击。此时，我的功能在单击按钮时不起任何作用。

<select id="myselect" name="myselect"> 
<option value='161'>Option 1</option> 
<option value='162'>Option 2</option> 
<option value='163'>Option 3</option> 
<option value='164'>Option 4</option> 
</select> 

<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('161')">Option 1<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('162')">Option 2<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('163')">Option 3<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('164')">Option 4<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 

function removeOption(option) { 
var optionValue = "'[value=" + "\"" + option + "\"" + "]'"; 
$(this).find(optionValue).remove(); 
$("#myselect").selectpicker("refresh"); 
} 

Answer 1

您remove部分更改为，

$('#myselect option[value=' + option + ']').remove(); 

function removeOption(option) { 
 
    $('#myselect option[value=' + option + ']').remove(); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect" name="myselect"> 
 
    <option value='161'>Option 1</option> 
 
    <option value='162'>Option 2</option> 
 
    <option value='163'>Option 3</option> 
 
    <option value='164'>Option 4</option> 
 
</select> 
 

 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('161')">Option 1<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('162')">Option 2<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('163')">Option 3<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('164')">Option 4<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button>

现在，人们发现在您选择该选项，提供价值的价值，并删除它。

活生生的例子

JSFiddle

Answer 2

我不知道你为什么这样做，你在做什么，但是这是我怎么会做它。删除内联事件处理程序和使用数据属性来存储值删除：

$('button').click(function() { 
 
    $('#myselect option[value="' + $(this).data("remove") + '"]').remove() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect" name="myselect"> 
 
<option value='161'>Option 1</option> 
 
<option value='162'>Option 2</option> 
 
<option value='163'>Option 3</option> 
 
<option value='164'>Option 4</option> 
 
</select> 
 

 
<button type='button' class='btn btn-primary btn-xs' data-remove='161'>Option 1<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' data-remove='162'>Option 2<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' data-remove='163'>Option 3<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' data-remove='164'>Option 4<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button>

Answer 3

下面的代码工作。你应该使用$("#myselect option[value='your value'])选择删除您的选项

function removeOption(option) { 
 
var optionValue = "option[value='" + option + "']"; 
 
$("#myselect "+optionValue).remove(); 
 
$//("#myselect").selectpicker("refresh"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect" name="myselect"> 
 
<option value='161'>Option 1</option> 
 
<option value='162'>Option 2</option> 
 
<option value='163'>Option 3</option> 
 
<option value='164'>Option 4</option> 
 
</select> 
 

 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('161')">Option 1<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('162')">Option 2<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('163')">Option 3<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('164')">Option 4<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button>

Answer 4

这个怎么样

function removeOption(option) { 
 
$('select >option[value="'+option+'"]').remove(); 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect" name="myselect"> 
 
<option value='161'>Option 1</option> 
 
<option value='162'>Option 2</option> 
 
<option value='163'>Option 3</option> 
 
<option value='164'>Option 4</option> 
 
</select> 
 

 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('161')">Option 1<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('162')">Option 2<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('163')">Option 3<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button> 
 
<button type='button' class='btn btn-primary btn-xs' onClick="removeOption('164')">Option 4<span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button>