javascriptを使用して選択からオプションを削除します

Question

私はPHPを使用してデータベースから設定されたオプションを含むドロップダウンを持っています。ドロップダウンの下に表示する各オプションの表示ボタンを作成しました。各ボタンは、削除オプション機能を呼び出し、その値を渡します。ボタンの1つがクリックされたときにドロップダウンからオプションを削除しようとしています。ボタンがクリックされたとき、私の現在の機能は何もしません。

<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

今すぐ

$('#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>

にごremove一部を変更

、それは提供された値の値を使用して選択してオプションを見つけることですし、それを削除します。

ライブ例

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

以下のコードは動作します。あなたは

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

がどのようにこの1

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>