web-dev-qa-db-ja.com

動的作成オプションからオプション「選択」属性を設定します

JavaScript関数を使用して動的に作成された選択オプションがあります。選択オブジェクトは

<select name="country" id="country">
</select>

js関数が実行されると、「国」オブジェクトは

<select name="country" id="country">
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    ...
    <option value="ID">Indonesia</option>
    ...
    <option value="ZW">Zimbabwe</option>
</select>

デフォルトの選択オプションとして「インドネシア」を表示します。注：そのオプションにはselected="selected"属性はありません。

その後、selected="selected"属性を「インドネシア」に設定する必要があり、これを使用します

var country = document.getElementById("country");
country.options[country.options.selectedIndex].setAttribute("selected", "selected");

firebugを使用すると、「インドネシア」オプションは次のように表示されます

<option value="ID" selected="selected">Indonesia</option>

ただし、IEで失敗します（IE 8でテスト済み）。

そして、jQueryを使用してみました

$( function() {
    $("#country option:selected").attr("selected", "selected");
});

fFXとIEの両方で失敗します。

「インドネシア」オプションにはselected="selected"属性が必要なので、リセットボタンをクリックすると、再び「インドネシア」が選択されます。

js関数を変更して「国」オプションを動的に作成することはオプションではありません。ソリューションはFFXとIEの両方で機能する必要があります。

ありがとうございました

javascriptjqueryselectattributesoption
59
tsurahman

良い質問。 DOMプロパティに依存するのではなく、HTML自体を変更する必要があります。

var opt = $("option[val=ID]"),
    html = $("<div>").append(opt.clone()).html();
html = html.replace(/\>/, ' selected="selected">');
opt.replaceWith(html);

このコードは、インドネシアのオプション要素を取得し、それを複製して、新しいdiv（ドキュメント内ではない）に挿入して、完全なHTML文字列<option value="ID">Indonesia</option>を取得します。

次に、元のオプションをこの新しいオプションで置き換える前に、文字列の置換を行って属性selected="selected"を文字列として追加します。

IE7でテストしました。リセットボタンが正常に機能している状態でここを参照してください： http://jsfiddle.net/XmW49/

26
David Tang

あなたはそれを考え直しています：

var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;
102
furtive

HTML自体を変更する代わりに、select要素に必要な値を設定するだけです。

$(function() {
    $("#country").val("Indonesia");
});
21
antonjs

たくさんの間違った答え！

フォームのリセット時にフォームフィールドに戻す値を指定するには、次のプロパティを使用します。

  • チェックボックスまたはラジオボタン：defaultChecked
  • その他の<input>コントロール：defaultValue
  • ドロップダウンリストのオプション：defaultSelected

そのため、現在選択されているオプションをデフォルトとして指定するには：

var country = document.getElementById("country");
country.options[country.selectedIndex].defaultSelected = true;

以前に設定されていた場合、すべてのオプションにdefaultSelected値を設定することをお勧めします。

var country = document.getElementById("country");
for (var i = 0; i < country.options.length; i++) {
    country.options[i].defaultSelected = i == country.selectedIndex;
}

これで、フォームがリセットされると、選択したオプションが指定したオプションになります。

12
gilly3
// get the OPTION we want selected
var $option = $('#SelectList').children('option[value="'+ id +'"]');
// and now set the option we want selected
$option.attr('selected', true);​​
11
corradio

行うことは、選択ボックスのselectedIndex属性を設定することです。

country.options.selectedIndex = index_of_indonesia;

IEでは、「選択」属性の変更は通常機能しません。 本当に記述している動作が必要な場合は、カスタムjavascriptリセット関数を作成して、フォーム内の他のすべての値をデフォルトにリセットすることをお勧めします。

9
Sam Dufel

これはFF、IE9で動作します

var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");
6
Alexi
// Get <select> object
var sel = $('country');

// Loop through and look for value match, then break
for(i=0;i<sel.length;i++) { if(sel.value=="ID") { break; } }

// Select index 
sel.options.selectedIndex = i;

ベギトゥロ。

2
Ben

これは古い質問ですが、新しいバージョンのJQueryでは次のことができるようになりました。

$("option[val=ID]").prop("selected",true);

これは、Box9の選択された回答と同じことを1行で実現します。

1
Dustin Parham

これは動作するはずです。

$("#country [value='ID']").attr("selected","selected");

要素にバインドされた関数呼び出しがある場合は、次のようなものを続けてください

$("#country").change();
1
kstl
select = document.getElementById('selectId');
var opt = document.createElement('option');
    opt.value = 'value';
    opt.innerHTML = 'name';
    opt.selected = true;
    select.appendChild(opt);
1
Oumaya Abdelkhalek

正しい値が見つかるまで、すべてのオプション値を検索できます。

var defaultVal = "Country";
$("#select").find("option").each(function () {

    if ($(this).val() == defaultVal) {

        $(this).prop("selected", "selected");
    }
});
1
mark.inman

$(...).val()関数を使用してこのようなことを試みましたが、関数は存在しませんでした。 <input>の場合と同じ方法で値を手動で設定できることがわかります。

// Set value to Indonesia ("ID"):
$('#country').value = 'ID'

...また、選択時に自動的に更新されます。少なくともFirefoxで動作します。他の人でも試してみてください。

0
Hippo

このページのアイデアは役に立ちましたが、私のシナリオは相変わらず異なっていました。だから、モーダルbootstrap /エクスプレスノードjs/aws beanstalkでは、これは私のために働いた：

var modal = $(this);
modal.find(".modal-body select#cJourney").val(vcJourney).attr("selected","selected");

select ID = "cJourney"とドロップダウン値が変数に保存された場所：vcJourney

0
David White

実行時に入力オプションを設定するには、「チェック済み」値を設定してみてください。 （チェックボックスではない場合でも）

elem.checked=true;

Elemは、選択するオプションへの参照です。

したがって、上記の問題の場合：

var country = document.getElementById("country");
country.options[country.options.selectedIndex].checked=true;

これは、オプションがでラップされていない場合でも機能します。

すべてのタグが同じ名前を共有している場合、新しいタグがチェックされたときにチェックを外す必要があります。

0
grigb