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

将$('button#monbtn').click(function() { var username = $('#username').val(); var msg = $('#msg').val(); var url = "{{ path('ajax_subcategories', {'username': " + username + ",'msg':" + msg + "})|escape('js') }}"; }部分更改为

remove

＆＃13;

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

＆＃13;

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

＆＃13;

现在，它在您的选择中使用提供的值的值找到该选项，并将其删除。

直播示例

JSFiddle

Answer 2

我不确定你为什么要做你正在做的事情，但这就是我做的事情。删除内联事件处理程序并使用data属性存储要删除的值：

$('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'])选择器删除您的选项

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

这个怎么样

＆＃13;

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

＆＃13;

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

＆＃13;

使用javascript从select中删除选项

4 个答案: