コアのjQueryを使用して、セレクトボックスのすべてのオプションを削除した後、1つのオプションを追加してそれを選択する方法を教えてください。
私のセレクトボックスは以下の通りです。
<Select id="mySelect" size="9"> </Select>
EDIT: 以下のコードはチェイニングに役立ちました。しかし、(Internet Explorerでは).val('whatever')
では、追加されたオプションが選択されませんでした。(確かに.append
と.val
の両方で同じ 'value'を使っていました)。
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
EDIT: このコードを真似るために、ページやフォームがリセットされるたびに次のコードを使っています。このセレクトボックスには、ラジオボタンのセットが入っています。.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";
EDIT: selected answerは私が必要としていたものに近いものでした。私はこれでうまくいきました。
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
しかし、どちらの答えも私の最終的な解決策に導いてくれました・・・。
デフォルトでは選択されているので、「1つ追加して選択する」という意味がよくわかりません。しかし、もし複数のものを追加するのであれば、より意味があると思います。次のようにするのはどうでしょう。
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
「編集」に対する応答。This select box is populated by a set of radio buttons」とはどういう意味なのか、明確にしていただけますか?<select>要素には(法的に)
<input type="radio">`要素を含めることはできません。
いただいた回答のおかげで、私のニーズに合った以下のようなものを作ることができました。私の質問はやや曖昧なものでした。フォローしていただきありがとうございます。最後の問題は、選択してほしいオプションに「選択された」を含めることで解決しました。
$(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>