使用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>