選択ボックスのすべてのオプションを削除してから、1つのオプションを追加してjQueryでそれを選択するにはどうすればよいですか?


1077

コアjQueryを使用して、選択ボックスのすべてのオプションを削除し、1つのオプションを追加してそれを選択するにはどうすればよいですか?

私のセレクトボックスは以下です。

<Select id="mySelect" size="9"> </Select>

編集:次のコードは連鎖に役立ちました。ただし、(Internet Explorerでは).val('whatever')追加されたオプションは選択されませんでした。(私は両方に同じ「の値を」を使用しなかった.append.val。)

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

編集:このコードを模倣するようにしようとして、ページ/フォームがリセットされるたびに次のコードを使用します。この選択ボックスには、ラジオボタンのセットが表示されます。.focus()はより近かったが、オプションはのように選択されたようには見えなかった.selected= "true"。私の既存のコードに問題はありません-私はただjQueryを学ぼうとしています。

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

編集:選択した答えは私が必要とするものに近かった。これは私のために働きました:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

しかし、両方の答えが私を私の最終的な解決策に導きました。

回答:


1695
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

3
@nickf:同じ問題がありますが、ドロップダウンの変更時に1つではなく一連のチェックボックスを追加する必要がありますが、私のチェックボックスはxmlから取得されます。これは機能しません
defau1t

10
:あなたはまた、オプション/ attrの/テキストのよう破る可能性があり注意.append($("<option></option>").attr("value", '123').text('ABC!')
Brockさんヘンズリー

1
@BrockHensley、私はこの答えの真の優雅さは、end()関数と組み合わせた適切なチェーンであると信じています。あなたの提案もうまくいきます。jQuery APIドキュメントから:「jQueryのDOMトラバーサルメソッドのほとんどは、jQueryオブジェクトインスタンスで動作し、新しいDOM要素のセットと一致する新しいインスタンスを生成します。これが発生すると、新しい要素のセットがスタックにプッシュされたかのようになります。これはオブジェクト内で維持されます。連続する各フィルタリングメソッドは、新しい要素セットをスタックにプッシュします。古い要素セットが必要な場合は、end()を使用して、セットをスタックからポップして戻すことができます。
Anthony Mason

1
これが、iOS用のPhoneGapでjQuery Mobileのメニューを再構築して、選択したオプションを変更できる唯一の方法でした。その後メニューを更新することも必要でした。
2015

3
@BrockHensleyあなたもこれまで行くことができます.append($("<option></option>", {'value':'123'}).text('ABC!')
vahanpwns

710
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

34
好奇心から、「空にする」のは「見つける」よりも速いですか?'find'はセレクターを使用し、 'empty'は要素をブルートフォースで空にするためです。
Dan Esparza

52
@DanEsparza私はあなたをjsperfにしました。empty()もちろん、速くなりました;)jsperf.com/find-remove-vs-empty
vzwick

このソリューションで奇妙な不具合が発生しました。データの入力部分は問題ありませんが、値(私の場合は1日)を選択しようとすると、値をコンソールログに記録できますが、選択フィールドに表示される値は最初の値のままです... 「トン決意を:/
タカーチゾルト

5
@TakácsZsoltたぶん.val('whatever')、マットの答えのように、チェーンの最後にa を追加する必要があります。
Kodos Johnson、

.empty()はMaterializeで機能しますが、.remove()は機能しませんでした
OverlordvI

127

単純なJavaScriptを使用しないのはなぜですか?

document.getElementById("selectID").options.length = 0;

7
これがすべてのオプションを削除する最も簡単な解決策であることに同意しますが、それは質問の半分しか答えません...
Elezar

2
これはメモリリークを引き起こさないでしょうか?オプション要素にアクセスできなくなりましたが、まだ割り当てられています。
Synetech

1
プレインオールドJS FTW(For the Win)!!! :)
raddevus

78

最初のオプションを除いてすべてのオプションを選択から削除することが目的の場合(通常は「アイテムを選択してください」オプション)、次のように使用できます。

$('#mySelect').find('option:not(:first)').remove();

10
これが答えになるはずです。他のすべてのユーザーは、後で再作成することを目的として、意図的に最初のものを削除しました。また、最初のオプションをどこかに最初に保存したことも意味します。

76

IE7にバグがあり(IE6では問題なく動作します)、上記のjQueryメソッドを使用すると、DOM では選択がクリアされますが、画面ではクリアされません。IE開発者ツールバーを使用して、選択がクリアされ、新しい項目があることを確認できましたが、選択できなかったとしても、選択には古い項目がまだ表示されています。

修正は、jQueryではなく標準のDOMメソッド/プロパティ(元の元の投稿がそうであった)を使用してクリアすることでした-引き続きjQueryを使用してオプションを追加しました。

$('#mySelect')[0].options.length = 0;

6
.empty()によって、非表示のコンテナに含まれている選択ボックスが、親が非表示のときでも表示されるようになるため、このメソッドをie6でも使用する必要がありました。
コードコマンダー

2
この方法は、パフォーマンスが少し(約1%)高いこともわかり
vzwick

3
+1これは(私の意見では)最も読みやすいものであり、jsPerfリンク(@vzwickリンク)では、受け入れられた回答は34%遅くなりました(オペラ20)
Morvael

35

いずれにしてもデフォルトで選択されるため、「1つ追加して選択する」という意味が正確にわかりません。ただし、複数追加する場合は、より理にかなっています。次のようなものはどうですか:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

"編集"への応答: "この選択ボックスにはラジオボタンのセットが含まれています"の意味を明確にできますか?<select>要素は、(法的に)含めることはできません<input type="radio">要素を。


27
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

2
まだIE6を使用しており、この方法は機能しませんでした。ただし、FF 3.5.6では動作しました
Jay Corbett、

3
selectの変更をトリガーするために、最後に.change()を追加する必要があるかもしれません
Hayden Chambers

22
$("#control").html("<option selected=\"selected\">The Option...</option>");

12

いただいた回答のおかげで、自分のニーズにあった次のような作品を作ることができました。私の質問はややあいまいでした。フォローアップありがとうございます。私の最後の問題は、選択したいオプションに「選択」を含めることで解決しました。

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>


8

htmlを新しいデータに変更するだけではどうでしょう。

$('#mySelect').html('<option value="whatever">text</option>');

もう一つの例:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

8
  1. 最初に既存のオプションをすべてクリアして、最初のオプションを実行します(--Select--)

  2. ループを使用して新しいオプション値を1つずつ追加します

    $('#ddlCustomer').find('option:not(:first)').remove();
    for (var i = 0; i < oResult.length; i++) {
       $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
    }

7

ネットで以下のようなものが見つかりました。私の状況にあるようなオプションの何千本はたくさん速くよりです.empty().find().remove()jQueryのから。

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

詳細はこちら



7
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

コードの1行目では、オプションの検索条件が言及されていないため、選択ボックスのすべてのオプションが削除されます。

コードの2行目は、指定されたvalue( "testValue")およびText( "TestText")を持つOptionを追加します。


これは質問に答えるかもしれませんが、それがどのように答えるについての説明を提供した方がはるかに便利です。
Nick

6

maurettoの答えに基づいて、これは少し読みやすく理解しやすいです。

$('#mySelect').find('option').not(':first').remove();

特定の値を持つオプションを除くすべてのオプションを削除するには、これを使用できます。

$('#mySelect').find('option').not('[value=123]').remove();

追加するオプションがすでにそこにある場合、これはより良いでしょう。


4

jquery prop()を使用して、選択したオプションをクリアします

$('#mySelect option:selected').prop('selected', false);

1
.prop()は、jQuery 1.6以降でのみ有効になります。jQuery 1.5-の場合は、.attr()を使用します
Agi Hammerthief 2014年

4

これにより、既存のmySelectが新しいmySelectに置き換えられます。

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

4

あなたは単にhtmlを置き換えることで行うことができます

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

4

selectタグからすべてのオプションを削除するための1行だけで、オプションを追加できたら、2行目にオプションを追加します。

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

2
  • 追加するオプション値をオブジェクトに保存する
  • selectタグの既存のオプションをクリアする
  • リストオブジェクトを反復処理し、目的の選択タグにコンテンツを追加します

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

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

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



1

それがうまくいくことを願っています

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

それ以上のオプションは私が2番目を選択できない場合に機能します
Anburaj_N '31

0
var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.