從選擇中刪除選項使用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>