いすべてのオプションの選択ボックスを追加して一つのオプションで選択しjQuery?

https://stackoverflow.com/questions/47824

09-06-2019
|

質問

使用コアjQueryどうかという話があったようだをすべて削除し、オプションの選択ボックスを追加して一つのオプションを選択しですか？

私の選択ボックスは、次のようなものです。

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

編集：以下のコードホchaining.しかし、(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>') ;

いずれも回答がない私の最終解決..

解決

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

他のヒント

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

なぜならず利用平javascript?

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

あったかバグIE7(動作IE6)ここで、上記のjQuery方法が明らかに選択 DOMにな画面になります。利用の開発ツールバーからきていることが確認できる選択ってクリアされた、新アイテムで視覚的に選択だが、古い項目もできないを選択します。

に固定した利用DOM方法/properitesとしてのポスター独自のた)を明確になjQuery-もjQueryを使った追加します。

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

の場合はすべて削除し、オプションからの選択を除き、一つ目は、"お受け取りください項目'オプション）を使用できる:

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

だまさにそのものの意味"を追加を選んで"となりますので、設定されます。だいた場合は、追加のようです。どのようなもの:

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

への対応の"編集":き明かということは"この選択ボックスでは人口のラジオボタン"?A <select> 要素できない情報を含 <input type="radio"> ます。

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

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

への回答を受けた、作ることができなかった以下のようなもので、スーツです。私の質問やや曖昧なものです。り下記ます。私の最終問題の解決策として含む"を選択のオプションをしたかったのを選択します。

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

最初に明確にすべての既存のオプション以外での第一選択----)

追加オプション値を使用ループ一

$('#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));
}

どう変化する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>
');

別の方法：

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

このリンクについての実践 https://api.jquery.com/select/

がその場で発音を確認することが、当期純ようなものです。と何千ものオプションのようなことがたくさんより .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;
}

詳細情報こちらの.

ビmaurettoの答えは、これはちょっとり:

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

全て取り除くオプションのものを除く特定の値を使用できます:

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

この大きいオプションを追加するには既にあります。

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

最初の行のコードを削除します全てのオプションの選択ボックスとオプションを探していただき挙げられる。

次のコードを追加オプションを、指定された値("testValue"）とテキスト（"TestText").

を使用しjquery プロップ() の選択したオプション

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

このまま置き換え、既存のmySelect新mySelect.

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

できな変えるだけでhtml

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

希望で

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

保存のオプション値が追加されるオブジェクト
明らかに既存のオプションを選択しタグ
繰り返し処理を実行し、リストオブジェクトと追加のコンテンツのタグを選択

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>

このコードselect2 https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

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

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('');

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow