web-dev-qa-db-ja.com

jQueryを使用して選択ボックスでオプションを事前選択する方法

さまざまなオプションを備えた選択ボックスが1つあります。

ページが読み込まれると、jQueryで値（たとえば10）を持つ1つのオプションを事前に選択する必要があります。

どうやってやるの？

jqueryhtmlformsselection
15
John

ページが読み込まれたら、これを実行します（<body onload="//put code here">に入れることができます）：

$("option[value='10']").attr('selected','selected');
25
Adam

例をテストします：http://jsfiddle.net/VArCZ/

$(document).ready(function() {

    $('#mySelectBox').val('10');

});

ただし、初期値が静的である場合、これにはjQueryは必要ありません。

<select id='mySelectBox'>
    <option value='5'>5</option>
    <option value='10' selected='selected'>10</option>
    <option value='15'>15</option>
</select>​
19
user113716

最新のjQueryバージョンでは、これは私のために機能します：

$("option[value='10']").prop('selected',true);
0
Kevin Lieser

これは、コードで再利用するものです。お役に立てば幸いです。コンソール出力を有効にして、何が起こっているかを確認できます。この機能を使用すると、以下の例に示すように、オプション値またはオプションテキストに基づいて目的のオプションを一致させることができます。

HTML：

<select id="languages">
 <option value="01">Java</option>
 <option value="02">HTML</option>
</select>

<select class="data-interchange">
 <option value="A">JSON</option>
 <option value="B">XML</option>
</select>

JavaScript（Jqueryを使用）

$(function() {
  preSelectDropDownList("#languages", "val", "02");
  preSelectDropDownList(".data-interchange", "text", "XML");

  function preSelectDropDownList(selector, checkAgaints, neddle) {
    //console.log(selector, checkAgaints, neddle);//DEBUG
    let hayStack = "";
    neddle = neddle == null ? "" : neddle;
    $(selector + " option").filter(function() {
        if (checkAgaints === "text") {
            hayStack = $(this).text();
        } else if (checkAgaints === "val") {
            hayStack = $(this).val();
        } else {
            alert("Error on Param 2.Only text or value allowed -->" + checkAgaints);
        }
        var result = hayStack.includes(neddle);
        //console.log(neddle+" vs "+hayStack+" = "+result);//DEBUG
        //console.log("Selected return", result);//DEBUG
        return result;
    }).prop('selected', true);
}
});
0
daviek19

上記のコードは機能しており、次のコードを使用できます。

$("option[value='10']").attr('selected','selected');
0
purab