62

セレクトボックスあります

<select id="my_select">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

<div id="reset">
    reset
</div>

ボタンもリセットしました。ここではデフォルト（選択）値は「b」です。「c」を選択するとします。選択ボックスの値をデフォルトに戻す必要がある場合、jqueryを使用してこれを作成するにはどうすればよいですか？

$("#reset").on("click", function () {
    // What do here?
});

jsfiddle: http://jsfiddle.net/T8sCf/1/

4

24 に答える 24

85

defaultSelectedオプション要素のプロパティを利用できます:

selectedオプションがデフォルトで選択されているかどうかを示す HTML 属性の初期値が含まれます。

したがって、DOM インターフェースは、最初に選択されたオプションをすでに追跡しています。

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

デモ

これは、複数選択要素に対しても機能します。

すべてのオプションを繰り返し処理するのではなく、最初に選択したオプションを見つけた後に「中断」する場合は、.each代わりに次を使用できます。

$('#my_select option').each(function () {
    if (this.defaultSelected) {
        this.selected = true;
        return false;
    }
});

jQuery を使用しない場合:

var options = document.querySelectorAll('#my_select option');
for (var i = 0, l = options.length; i < l; i++) {
    options[i].selected = options[i].defaultSelected;
}
于 2013-06-04T08:38:05.630 に答える
19 
$('#my_select').get(0).selectedIndex = 1;

しかし、私の意見では、より良い方法は HTML のみを使用することです (と<input type="reset" />):

<form>
    <select id="my_select">
        <option value="a">a</option>
        <option value="b" selected="selected">b</option>
        <option value="c">c</option>
    </select>
    <input type="reset" value="reset" />
</form>
于 2013-06-04T08:32:01.090 に答える
15 
$("#reset").on("click", function () {
    $("#my_select").val('b');//Setting the value as 'b'
});
于 2013-06-04T08:32:28.963 に答える
8

要素のdata属性を使用できますselect

<select id="my_select" data-default-value="b">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

あなたのJavaScript、

$("#reset").on("click", function () {
    $("#my_select").val($("#my_select").data("default-value"));
});

http://jsfiddle.net/T8sCf/10/

アップデート

デフォルトの選択がわからず、html を更新できない場合は、次のコードを dom ready に追加してください。

$("#my_select").data("default-value",$("#my_select").val());

http://jsfiddle.net/T8sCf/24/

于 2013-06-04T08:34:41.950 に答える
5 
$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});
于 2013-06-04T08:32:06.597 に答える
5 
<select id="my_select">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

<div id="reset">
    reset
</div>

$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});

これはあなたの質問に対する簡単な方法です。たった一行の答え。

于 2019-05-29T04:44:07.520 に答える
3

複数の SELECT の値をリセットしてから、送信ボタンをトリガーすることもできます。

ここで実際にそれを見てください：

実際の例:

$(function(){
    $("#filter").click(function(){
        //alert('clicked!');
        $('#name').prop('selectedIndex',0);
        $('#name2').prop('selectedIndex',0);
        $('#submitBtn').click();
    });
});
于 2015-10-30T16:56:00.530 に答える
1

イベント ハンドラーを の focus イベントにバインドしてselect、前の値を取得します。次にselect、リセットをクリックすると、の値が以前の値に設定されます。

var previousValue = "";
$("#my_select").on("focus",function(){
    previousValue = $(this).val();
});

$("#reset").on("click", function () {
   $("#my_select").val(previousValue);
});

作業例: http://jsfiddle.net/T8sCf/17/

于 2013-06-04T08:36:13.277 に答える
1

Bootstrap-select を使用している場合は、これを使用することをお勧めします。

$('#mySelect').selectpicker('render');
于 2016-08-22T13:07:30.697 に答える
1

このコードはあなたを助けます。

<html>
<head>
    <script type="text/JavaScript" src="jquery-2.0.2.min.js"></script>
    <script type="text/JavaScript">
        $(function(){
            var defaultValue = $("#my_select").val();
            $("#reset").click(function () {
                $("#my_select").val(defaultValue);
            });
        });
    </script>
</head>
<body>
    <select id="my_select">
        <option value="a">a</option>
        <option value="b" selected="selected">b</option>
        <option value="c">c</option>
    </select>
    <div id="reset">
        <input type="button" value="reset"/>
    </div>
</body>

于 2013-06-04T08:43:05.770 に答える
0

これは私のために働く：

$("#reset").on("click", function () {
    $("#my_select option[selected]").prop('selected', true);
}

select 属性を持つデフォルトのオプションを見つけて、選択をそのオプションに変更します。

于 2014-07-09T11:20:58.640 に答える
0

すべての選択フィールドをデフォルト オプションにリセットします。ここでは、選択した属性が定義されています。

$("#reset").on("click", function () {
    // Reset all selections fields to default option.
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
});
于 2016-07-18T07:19:10.017 に答える