web-dev-qa-db-ja.com

ドロップダウンリストの選択値をjQueryで変更する

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

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

しかし、私はjQueryを使ってこれを行う必要があります。なぜなら私は私のセレクタにCSSクラスを使っているからです（stupid ASP.NET client ids ...）。

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

$("._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（私はInternet Explorer 6を推測している）のバグなのかどうかわからないが、それはひどく煩わしい。

javascriptjqueryhtml-select
753
phairoh

jQueryのドキュメント

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

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

あなたはおそらくこれが欲しい：

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

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

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

または

$("._statusDDL").val(2).change();
115
Aivar Luist

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

クライアントで正しいコントロール名を取得するために、次のコード行を書くことができます。

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

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

31
y0mbo

としてみてください 

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

ではなく 

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

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

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

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

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

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

注意：

私はこれが最短で、信頼性があり、一般的でエレガントな解決策であると思います。

私の場合は、value属性ではなく選択されたオプションのdata属性を使用しているからです。各オプションに一意の値がない場合は、上記の方法が最短かつ最適です。

19
ISIK

これらの解決策は、ドロップダウンリストの各項目にドロップダウンリストの位置に関する val（） 値があると仮定しているようです。

そうでない場合、物事はもう少し複雑です。

read ドロップダウンリストの選択されたインデックスには、これを使用します。

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

set ドロップダウンリストの選択されたインデックスには、これを使用します。

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

prop（） 機能にはJQuery v1.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

あー！

お役に立てれば。

19
Mike Gledhill

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

好き 

<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に変更し、アイテム4の代わりに「アイテム3」を選択済みとして表示します。 

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

ブラウザで選択された項目3が表示されます。ただし、データをphpまたはaspで処理した場合、選択された値は「4」と表示されます。

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

_ edit _ ： "+ newselectedIndex +"の前後に一重引用符を追加して、同じ機能を数値以外の値にも使用できるようにします。

だから私は実際には、選択した属性を削除してから選択したように新しいものを作ることです。

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

14
Rocker Maruf

「データ分類」というタイトルのドロップダウンがあるとします。

<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);
8
vapcguy

そこで、 setTimeoutを使用して300ミリ秒後に実行するように変更しました。今働いているようです。

Ajax呼び出しからデータをロードするとき、私はこれに何度も遭遇しました。私も.NETを使用していますが、jQueryセレクターを使用するときにclientIdに調整するには時間がかかります。発生している問題を解決し、setTimeoutプロパティを追加する必要がないようにするには、Ajax呼び出しに "async: false"を追加するだけで済みます。選択してください。以下の小さなサンプル：

$.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)
            );
        });
    }
});
4
clockwiseq

ちょっと注意してください - 私は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"であっても、これはあなたの要素を見つけます。

3
AVH

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

3
Mych

私は拡張関数を使ってクライアントIDを取得します。

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

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

$.clientID("_statusDDL")
3
jonofan
<asp:DropDownList id="MyDropDown" runat="server" />

$("select[name$='MyDropDown']").val()を使用してください。

2
Monty
<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 = "静的" 

$('#DropUserType').val('1');
2
hamze shoae

ドロップダウンリストにどのように値をロードしますか、または選択する値を決定しますか。 Ajaxを使用してこれを行っている場合、選択が行われるまでに遅延が必要なのは、問題の行が実行された時点で値がロードされていなかったためです。アラートアクションはデータがロードされるのに十分な遅延を与えるため、ステータスを設定する前にラインにアラートステートメントを入力した場合になぜこれが機能したのかも説明します。

JQueryのAjaxメソッドを使用している場合は、コールバック関数を指定してから$("._statusDDL").val(2);をコールバック関数に含めることができます。

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

2
Pervez Choudhury

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

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