1174

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

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

4

27 に答える 27

1807 
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
于 2008-09-06T21:01:36.750 に答える
765 
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
于 2009-12-16T21:07:16.527 に答える
93

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

$('#mySelect').find('option:not(:first)').remove();
于 2013-03-27T09:56:28.187 に答える
82

上記のjQueryメソッドを使用すると、画面上ではなくDOM内の選択がクリアされるというバグがIE7にありました(IE6では正常に動作します) 。IE Developer Toolbar を使用すると、選択がクリアされ、新しい項目が含まれていることを確認できましたが、視覚的には、選択できなくても古い項目が表示されていました。

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

$('#mySelect')[0].options.length = 0;
于 2010-01-11T09:22:09.090 に答える
45

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

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

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

于 2008-09-08T18:51:12.850 に答える
27 
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
于 2009-06-03T20:48:14.380 に答える
22 
$("#control").html("<option selected=\"selected\">The Option...</option>");
于 2011-03-30T02:30:23.197 に答える
14

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

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

于 2008-09-09T22:04:52.127 に答える
9

以下のようなものをネットで見つけました。私の状況のような何千ものオプションを使用すると、これはjQueryより.empty()もはるかに高速です。.find().remove()

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;
}

詳細はこちら。

于 2015-04-08T09:42:42.290 に答える
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));
}
于 2015-09-30T06:58:01.857 に答える
4

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

$('#mySelect option:selected').prop('selected', false);
于 2014-02-01T11:09:32.530 に答える
4

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

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
于 2016-10-04T00:07:09.020 に答える
1

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

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
于 2016-10-23T04:06:55.670 に答える
0

試す

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>

于 2020-08-03T20:57:08.850 に答える