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

1110
Jay Corbett 2008-09-07 10:53.

コア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>') ;

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

24 answers

1739
Matt 2008-09-07 11:01.
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
725
Mahzilla 2009-12-17 11:07.
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
135
Shawn 2013-11-14 09:45.

プレーンなJavaScriptを使用しないのはなぜですか?

document.getElementById("selectID").options.length = 0;
83
mauretto 2013-03-27 23:56.

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

$('#mySelect').find('option:not(:first)').remove();
77
row1 2010-01-11 23:22.

IE7にバグがあり(IE6では正常に動作します)、上記のjQueryメソッドを使用すると、DOMで選択がクリアされますが、画面ではクリアされません。IE Developerツールバーを使用して、選択がクリアされ、新しいアイテムがあることを確認できましたが、視覚的には、選択できなかった場合でも、古いアイテムが表示されていました。

修正は、jQueryではなく標準のDOMメソッド/プロパティ(ポスターのオリジナルのように)を使用してクリアすることでした-引き続きjQueryを使用してオプションを追加します。

$('#mySelect')[0].options.length = 0;
40
Bobby Jack 2008-09-09 08:51.

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

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

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

27
Hayden Chambers 2009-06-04 10:48.
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
22
jvarandas 2011-03-30 16:30.
$("#control").html("<option selected=\"selected\">The Option...</option>");
13
Jay Corbett 2008-09-10 12:04.

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

$(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
Shiv 2014-11-13 01:45.

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
Jhon Intriago Thoth 2017-07-14 05:55.

別の方法:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

このリンクの下に、グッドプラクティスがあります https://api.jquery.com/select/

8
Jaydeep Shil 2015-09-30 20:58.
  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));
    }
    
8
Kaushik shrimali 2019-07-17 20:29.

選択タグからすべてのオプションを削除するための1行だけで、オプションを追加できるようになったら、2行目を作成してオプションを追加します。

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

もう1つの短い方法ですが、試していません

$('.ddlsl').empty().append(new Option('Select all', 'all'));
7
marioosh 2015-04-08 23:42.

私はネット上で以下のようなものを見つけました。私の状況にあるようなオプションの何千本はたくさん速くよりです.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
Dev Chauhan 2018-10-12 23:14.
$("#id option").remove(); $("#id").append('<option value="testValue" >TestText</option>');

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

コードの2行目は、指定された値( "testValue")とText( "TestText")でオプションを追加します。

6
humbads 2015-06-19 03:52.

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

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

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

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

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

4
mehrdad 2014-02-02 01:09.

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

$('#mySelect option:selected').prop('selected', false);
4
Barun 2013-10-18 21:41.

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

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');
4
Nadeem Manzoor 2016-10-04 14:07.

HTMLを置き換えるだけで簡単にできます

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
3
Nifemi Sola-Ojo 2018-09-04 01:17.
  • オブジェクトに追加するオプション値を保存します
  • 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>

2
michael01angelo 2019-01-25 20:34.

このコードはSelect2- ClearingSelectionsで見ました

$('#mySelect').val(null).trigger('change');

このコードは、Select2がなくてもjQueryでうまく機能します

1
Md. Russel Hussain 2016-10-23 18:06.

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

$('#myselect').find('option').remove() .append($('<option></option>').val('value1').html('option1'));
0
LN Nitharsan 2018-08-20 07:22.
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('');
0
Kamil Kiełczewski 2020-08-04 10:57.

試してみてください

mySelect.innerHTML = `<option selected value="whatever">text</option>`

function setOne() {
  console.log({mySelect});
  mySelect.innerHTML = `<option selected value="whatever">text</option>`;
}
<button onclick="setOne()" >set one</button>
<Select id="mySelect" size="9"> 
 <option value="1">old1</option>
 <option value="2">old2</option>
 <option value="3">old3</option>
</Select>

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

Total War:Warhammer:Kotakuレビュー

Total War:Warhammer:Kotakuレビュー

私はこのゲームを嫌う準備ができていました。先週の前に、Total War:Warhammerについての私の考えがありました:それでもここに私は、私の手にある完成品であり、私は変わった男です。

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

スタンディングロックスー族のメンバーと水の保護者は、ノースダコタ州のスタンディングロックにあるオセティサコウィンキャンプを去ります。(Twitter経由のCNNスクリーンショット)火と煙がスカイラインを覆い、スタンディングロックスー族のメンバーと水の保護者が、聖なるものを守りながら建てた家、オセティサコウィン(セブンカウンシルファイアーズ)キャンプから行進し、太鼓を打ち、歌い、祈りました。ダコタアクセスパイプラインとしても知られる「ブラックスネーク」からの土地。

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

写真:APシアーズとKマートは、イヴァンカ・トランプのトランプホームアイテムのコレクションも、誰も購入したくないために削除しました。シアーズとKマートの両方の親会社であるシアーズホールディングスは、土曜日のABCニュースへの声明で、彼らが気にかけていると辛抱強く説明しましたトランプラインを売り続けるにはお金を稼ぐことについてあまりにも多く。

ポテトチップスでたった10分でスペインのトルティーヤを作る

ポテトチップスでたった10分でスペインのトルティーヤを作る

伝統的なスペインのトルティーヤは通常、オリーブオイルで柔らかくなるまで調理されたポテトから始まります(30分以上かかる場合があります)が、ケトルで調理されたポテトチップスの助けを借りてわずか10分でテーブルに置くことができます。上のビデオはすべてがバラバラにならないように裏返す方法を含め、レシピ全体を説明しますが、必要なのは4〜5個の卵と3カップのケトルチップスだけです。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language