908

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

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

ただし、セレクターにCSSクラスを使用しているため(愚かなASP.NETクライアント ID...) 、これを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のバグなのかはわかりません(おそらく Internet Explorer 6だと思います)。

4

18 に答える 18

1071

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

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

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

おそらくこれが必要です：

$("._statusDDL").val('2');
于 2009-01-31T19:43:42.750 に答える
154

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

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

また

$("._statusDDL").val(2).change();
于 2012-10-09T10:21:54.843 に答える
31

これらの解決策は、ドロップダウン リスト内の各項目に、ドロップダウン リスト内の位置に関連するval()値があることを前提としているようです。

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

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

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

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

$("#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

于 2013-03-07T11:51:58.080 に答える
31

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

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

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

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

于 2009-04-21T02:16:22.783 に答える
27

試してみてください

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

とではなく

$("._statusDDL").val(2);
于 2009-02-01T11:45:06.820 に答える
21

いくつかの解決策を見た後、これは私にとってはうまくいきました。

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

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

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

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

ノート：

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

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

于 2012-05-17T17:24:26.007 に答える
17

これは古い質問であり、上記の解決策は場合によってはうまく機能します。

お気に入り 

<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」であることがわかります。その理由は、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 などの上級プログラマーからのコメントをお待ちしています。

于 2015-02-11T07:52:29.367 に答える
4

そこで、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)
            );
        });
    }
});
于 2010-06-21T04:59:23.773 に答える
3 
<asp:DropDownList id="MyDropDown" runat="server" />

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

于 2010-10-07T20:25:53.630 に答える
3

ちょっと注意してください-私は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」であっても要素が検索されます。

于 2010-03-29T20:07:22.970 に答える
3

次のように、extend 関数を使用してクライアント ID を取得します。

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

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

$.clientID("_statusDDL")
于 2011-04-07T02:05:17.553 に答える
3

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

于 2012-03-12T15:05:42.750 に答える
2

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

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

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

于 2009-02-01T12:12:01.587 に答える
1

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

$("._statusDDL").attr("selected", "");
于 2018-09-18T18:10:55.483 に答える