選択ボックスのすべてのオプションを削除してから、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

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

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

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

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

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

Netflixのジョエルマクヘイルとのジョエルマクヘイルショーは、ジョエルマクヘイルにぴったりの車を復活させます

Netflixのジョエルマクヘイルとのジョエルマクヘイルショーは、ジョエルマクヘイルにぴったりの車を復活させます

ジョエル・マクヘイル、マイク・コルター(スクリーンショット:Netflix)「私の神よ、これは1つのことを変えます。」これは、ジョエル・マクヘイルとのジョエル・マクヘイルショーの最後のジョークです。リアリティ番組の嘲笑と寛大なスナキネスの時間は、なじみのある顔を見つけます。

チームロケットは20年ぶりにポケモンシリーズでアッシュを破った

チームロケットは20年ぶりにポケモンシリーズでアッシュを破った

画像経由:@pancakeparadox(Twitter)。1997年にポケモンシリーズが初公開されて以来、チームロケット(またはラテンアメリカではチームロケット)として知られる悪役のグループは、何度もアッシュに直面してきました。

今週の科学技術でトランプがめちゃくちゃになったことすべて

今週の科学技術でトランプがめちゃくちゃになったことすべて

画像:ゲッティ私たち全員が千年もの間生きていて、私たちの体が燃える風によってほこりと長引く悲鳴だけに押し流されたと考えるのは驚くべきことです。私たちがそうしていないことを除いて、それはトランプ政権の最初の週の終わりであり、驚くほど多くの恐ろしいことがすでに起こっています。

あなたの「マイクロピッグ」が代わりに通常のピッグになってしまったとしても驚かないでください

あなたの「マイクロピッグ」が代わりに通常のピッグになってしまったとしても驚かないでください

そして今、あることを手に入れていると思っていたが、まったく別のことをしてしまった男の話。CBSニュースは、彼女が「ミニブタ」であるという誤ったふりをしてエスターを養子にしたカナダ人のスティーブジェンキンスの心温まる物語をもたらします。これは、特にせいぜいゴールデンレトリバーまたはセントバーナードをストラップします。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

Come diventare Web Developer?

Come diventare Web Developer?

Vorresti diventare web developer e non sai da dove cominciare?! Qui troverai tutte le risposte necessarie, anche io non sapevo che strada intraprendere ma voglio aiutarti a non commettere i miei stessi errori. Cosa imparare? Le competenza essenziali per qualsiasi web developer sono almeno tre.

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

Language