web-dev-qa-db-ja.com

jQueryで<select>のオプションを変更するにはどうすればいいですか？

オプションのリストが利用可能であるとしたら、どのようにして<select>を新しい<option>sに更新しますか？

jqueryhtml-select
252
Mask

empty メソッドを使用して既存のオプションを削除してから、新しいオプションを追加します。

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);

オブジェクトに新しいオプションがある場合は、次のことができます。

var newOptions = {"Option 1": "value1",
  "Option 2": "value2",
  "Option 3": "value3"
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

編集：最初のものを除くすべてのオプションを削除するには、 :gt セレクタを使用して、すべてのoption要素を取得できますインデックスがゼロより大きく、 remove それらの場合：

$('#selectId option:gt(0)').remove(); // remove all options, but not the first
549
CMS

私はCMSの優れた答えを簡単なjQuery拡張に投げました。

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);

"text"と "value"キーを含むオブジェクトの配列が必要です。そのため、使い方は次のとおりです。

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);
74
ktusznio
$('#comboBx').append($("<option></option>").attr("value",key).text(value));

comboBxはあなたのコンボボックスIDです。

または、既存のinnerHTMLに文字列としてオプションを追加してから、選択innerHTMLに割り当てることもできます。

編集

あなたが最初のオプションを維持し、他のすべてを削除する必要があるなら、あなたは使うことができます

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);
14
rahul

奇妙な理由でこの部分

$el.empty(); // remove old options

cMSソリューションから私のために働いていなかったので、その代わりに私は単にこれを使用しました

el.html(' ');

そしてそれはうまくいきます。だから私の作業コードは今そのようになります：

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};

var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});
5
Draco

DOM要素の削除と追加は、既存のものを変更するよりも遅くなります。

オプションセットの長さが同じ場合は、次のようにします。

$('#my-select option')
.each(function(index) {
    $(this).text('someNewText').val('someNewValue');
});

新しいオプションセットの長さが異なる場合は、上記の方法を使用して、本当に必要な空のオプションを削除または追加することができます。

3
Yuri Gor

手で物事をやっているという古い学校はいつも私には良かったです。

  1. 選択を削除し、最初のオプションをそのままにします。

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

  2. あなたのデータがJsonまたはその他のものから来ている場合（単にデータを連結する）：

        var JSONObject = JSON.parse(data);
    newOptionsSelect = '';
    for (var key in JSONObject) {
        if (JSONObject.hasOwnProperty(key)) {
            var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
        }
    }

    $('#your_select_id').append( newOptionsSelect );

  3. 私のJson Objetc：

        [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

このソリューションは、Ajaxを操作したり、データベースからJsonに答えたりするのに理想的です。

1
Toto

例えばあなたのhtmlコードがこのコードを含むならば：

<select id="selectId"><option>Test1</option><option>Test2</option></select>

あなたの選択内のオプションのリストを変更するためには、以下のコードを使用することができます。あなたの名前がnamed selectIdを選択したとき。

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);

上のこの例では、私はoptionの古いリストをたった一つの新しいオプションで変更します。

1
BERGUIGA Mohamed Amine

<select>を常に更新していて、以前の値を保存する必要がある場合

var newOptions = {
    'Option 1':'value-1',
    'Option 2':'value-2'
};

var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
   $el.append($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');
0
Roman Yakoviv

これは助けになりますか？

$("#SelectName option[value='theValueOfOption']")[0].selected = true;
0
Fsh