web-dev-qa-db-ja.com

jQuery / JavaScriptを使用してドロップダウンからすべてのオプションを削除する方法

以下に示すようなドロップダウンがあります：

_<select id="models" onchange="removeElements()">
            <option id = "remove" value="0">R8</option>
            <option id = "remove" value="1">Quattro</option>
            <option id = "remove" value="2">A6 hatchback</option>
</select>
_

選択内のすべてのオプションを削除するスクリプトremoveElements()を作成するにはどうすればよいですか？

javascriptjqueryhtmlselect
18
TotalNewbie

あなたはどのイベントで言ったのではなく、イベントリスナーで以下を使用するか、ページの読み込みで

$('#models').empty()

その後、再投入する

$.getJSON('@Url.Action("YourAction","YourController")',function(data){
 var dropdown=$('#models');
dropdown.empty();  
$.each(data, function (index, item) {
    dropdown.append(
        $('<option>', {
            value: item.valueField,
            text: item.DisplayField
        }, '</option>'))
      }
     )});
60
Mir Gulam Sarwar

オプション要素で 。remove（） を使用できます。

.remove（）：一致した要素のセットをDOMから削除します。

 $('#models option').remove(); or $('#models').remove('option');

または、選択時に 。empty（） を使用します。

.empty（）：DOMから一致した要素のセットのすべての子ノードを削除します。

 $('#models').empty();

ただし、削除されたオプションを再入力するには、削除中にオプションを保存する必要があります。

Show/hideを使用して同じことを実現することもできます。

$("#models option").hide();

後でそれらを表示するには：

$("#models option").show();
11
Milind Anantwar

.empty（）があなたのために機能しない場合、それは私にとってです

function SetDropDownToEmpty() 
{           
$('#dropdown').find('option').remove().end().append('<option value="0"></option>');
$("#dropdown").trigger("liszt:updated");          
}

$(document).ready(
SetDropDownToEmpty() ;
)
0
Jesse
function removeElements(){
  $('#models').html('');
}
0
Deepak Tiwari

これを試して

function removeElements(){
    $('#models').html("");
}
0
Dhambha

JavaScript（JQueryではなく）を使用している場合は、このソリューションを試してみてください。「モデル」はリストを含む選択フィールドのIDです。

var DDlist = document.getElementById("models");
while(DDlist.length>0){DDlist.remove(0);}
0
user3506285