jQueryを使用してドロップダウンリストの選択した値を変更する

既知の値のドロップダウンリストがあります。私がやろうとしていることは、ドロップダウンリストを、jQueryを使用して存在することがわかっている特定の値に設定することです。通常のJavaScriptを使用して、私は次のようなことをします：

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

ただし、セレクター（愚かなASP.NETクライアントID ...）にCSSクラスを使用しているため、jQueryでこれを行う必要があります。

これが私が試したいくつかのことです：

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

jQueryでそれを行うにはどうすればよいですか？

更新

結局のところ、私はそれを最初に正しく持っていました：

$("._statusDDL").val(2);

アラートをすぐ上に置くと問題なく動作しますが、アラートを削除してフルスピードで実行すると、エラーが発生します

選択したプロパティを設定できませんでした。無効なインデックス

それはjQueryのかのバグだ場合、私はよく分からないのInternet Explorer 6（私は推測しているインターネットエクスプローラ6）が、それはひどく迷惑なんです。

jQueryのドキュメントには次のように記載されています。

[jQuery.val]は、すべてのラジオボタン、チェックボックスをチェックまたは選択し、値のセットと一致するオプションを選択します。

この動作はjQueryバージョン以降に1.2あります。

あなたはおそらくこれを望みます：

$("._statusDDL").val('2');

隠しフィールドでは、次のように使用する必要があります：

$("._statusDDL").val(2);
$("._statusDDL").change();

または

$("._statusDDL").val(2).change();

参考までに、これを実現するためにCSSクラスを使用する必要はありません。

次のコード行を記述して、クライアントで正しいコントロール名を取得できます。

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NETは、jQuery内でコントロールIDを正しくレンダリングします。

試してみてください

$("._statusDDL").val("2");

とではなく

$("._statusDDL").val(2);

これらのソリューションは、ドロップダウンリスト内の各項目が、ドロップダウンリスト内の位置に関連するval（）値を持っていると想定しているようです。

そうでない場合、状況はもう少し複雑になります。

ドロップダウンリストの選択したインデックスを読み取るには、次のようにします。

$("#dropDownList").prop("selectedIndex");

ドロップダウンリストの選択したインデックスを設定するには、次のようにします。

$("#dropDownList").prop("selectedIndex", 1);

prop（）に注意してください機能は、jQueryのバージョン1.6以降が必要です。

これらの2つの関数の使い方を見てみましょう。

月名のドロップダウンリストがあるとします。

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

「前月」ボタンと「次月」ボタンを追加すると、現在選択されているドロップダウンリスト項目を確認して、前月/翌月に変更できます。

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

これらのボタンが実行するJavaScriptは次のとおりです。

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

次のサイトも、ドロップダウンリストにJSONデータを入力する方法を示すのに役立ちます。

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

ふew！

お役に立てれば。

いくつかの解決策を見た後、これは私のために働いた。

いくつかの値を含むドロップダウンリストが1つあり、別のドロップダウンリストから同じ値を選択したいのでselectIndex、最初のドロップダウンの変数を変数に入れます。

var indiceDatos = $('#myidddl')[0].selectedIndex;

次に、2番目のドロップダウンリストでそのインデックスを選択します。

$('#myidddl2')[0].selectedIndex = indiceDatos;

注意：

これは、最も短く、信頼性が高く、一般的でエレガントなソリューションだと思います。

私の場合、値属性ではなく、選択されたオプションのデータ属性を使用しているためです。したがって、各オプションに一意の値がない場合、上記の方法が最も短くて甘いです!!

私はこれが古い質問であることを知っており、上記の解決策はいくつかの場合を除いてうまく機能します。

お気に入り

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

したがって、アイテム4はブラウザーで「選択済み」と表示され、値を3に変更して、「アイテム3」をアイテム4の代わりに選択済みとして表示します。上記の解決策のように、

jQuery("#select_selector").val(3);

ブラウザでアイテム3が選択されていることがわかりますが、phpまたはaspでデータを処理すると、選択された値が "4"になります。理由は、htmlが次のようになるためです。

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

そして最後の値をサーバー側の言語で「4」として取得します。

この点に関して私の最終的な解決策

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

編集： "+ newselectedIndex +"の前後に単一引用符を追加して、同じ機能を非数値に使用できるようにします。

だから私が実際に行うことは、選択された属性を削除してから、選択された新しい属性を作成することです。

@strager、@ y0mbo、@ISIKなどの上級プログラマからのコメントに感謝します

「データ分類」というタイトルのドロップダウンがある場合：

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

それを変数に入れることができます：

var dataClsField = $('select[title="Data Classification"]');

次に、ドロップダウンに含める値を別の変数に入れます。

var myValue = "Top Secret";  // this would have been "2" in your example

次に、に入力したフィールドを使用dataClsFieldして、検索をmyValue行い、次のようにして選択することができます.prop()。

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

または、単にを使用することもでき.val()ますが、のセレクターは.、ドロップダウンのクラスと一致する場合にのみ使用でき、括弧内の値に引用符を使用するか、前に設定した変数を使用する必要があります。

dataClsField.val(myValue);

そこで、setTimeoutを使用して300ミリ秒後に実行されるように変更しました。現在動作しているようです。

Ajax呼び出しからデータをロードするときに、これに何度も遭遇しました。私も.NETを使用しており、jQueryセレクターを使用するときにclientIdに調整するのに時間がかかります。発生している問題を修正し、setTimeoutプロパティを追加する必要をなくすにasync: falseは、Ajax呼び出しに単に " " を追加するだけで、DOMに、選択に追加しているオブジェクトを戻すための十分な時間が与えられます。以下の小さなサンプル：

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

ただのメモ-私はjQueryでワイルドカードセレクターを使用して、ASP.NETのクライアントIDによって難読化されたアイテムを取得しました-これも役立つかもしれません：

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

id *ワイルドカードに注意してください。これは、名前が「ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown」であっても、エレメントを検索します。

私は次のように拡張機能を使用してクライアントIDを取得します。

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

次に、次のようにjQueryでASP.NETコントロールを呼び出すことができます。

$.clientID("_statusDDL")

別のオプションは、.netでコントロールパラメータClientID = "Static"を設定することです。これにより、設定したIDでJQueryのオブジェクトにアクセスできます。

<asp:DropDownList id="MyDropDown" runat="server" />

を使用し$("select[name$='MyDropDown']").val()ます。

ドロップダウンリストに値をどのように読み込んでいますか、またはどの値を選択するかを決定していますか？Ajaxを使用してこれを行う場合、選択が行われる前に遅延が必要になる理由は、問題の行が実行されたときに値がロードされなかったためである可能性があります。これは、アラートアクションがデータのロードに十分な遅延を与えるため、ステータスを設定する前にアラートステートメントを行に置いたときに機能する理由も説明します。

jQueryのAjaxメソッドの1つを使用している場合は、コールバック関数を指定して、 $("._statusDDL").val(2);。

これは、300ミリ秒以上かかった場合でも、データの準備ができたときにメソッドが確実に実行されるため、問題を処理するためのより信頼できる方法です。

<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "Static"

$('#DropUserType').val('1');

私の場合、.attr（）メソッドを使用してそれを機能させることができました。

$("._statusDDL").attr("selected", "");