it-swarm.com.ru

Сбросить выбранное значение по умолчанию

У меня есть поле выбора

<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/

48
OTAR

Вы можете использовать свойство defaultSelected элемента option :

Содержит начальное значение атрибута HTML selected, указывающее, выбран ли параметр по умолчанию или нет.

Итак, интерфейс DOM уже отслеживает, какая опция была выбрана изначально.

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

DEMO

Это будет работать даже для нескольких элементов.

Если вы не хотите перебирать все параметры, но «ломаетесь» после того, как нашли первоначально выбранный вариант, вы можете использовать вместо него .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;
}
65
Felix Kling
$('#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>
15
user1823761
$("#reset").on("click", function () {
    $("#my_select").val('b');//Setting the value as 'b'
});
14
웃웃웃웃웃

Вы можете использовать атрибут 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/

6
Chamika Sandamal

Почему бы не использовать простую функцию javascript и вызвать ее на событии onclick?

function reset(){
document.getElementById("my_select").selectedIndex = 1; //1 = option 2
}
6
freeworlder

Один хороший чистый способ - добавить атрибут data-default в список выбора.

<select id="my_select" data-default="b">
...
</select>

Тогда код действительно прост:

$("#reset").on("click", function () {
    var $select = $('#my_select');
    $select.val($select.data('default'));
});

Живой пример: http://jsfiddle.net/T8sCf/7/

3
Jamiec

Вы также можете сбросить значения нескольких SELECT и затем вызвать кнопку отправки.

Пожалуйста, посмотрите это здесь в действии:

Живой пример:

$(function(){
    $("#filter").click(function(){
        //alert('clicked!');
        $('#name').prop('selectedIndex',0);
        $('#name2').prop('selectedIndex',0);
        $('#submitBtn').click();
    });
});
3
Chale CS
$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});
3
IdemeNaHavaj

С помощью jquery:

$("#reset").on("click", function() {
    $('#my_select').val($('#my_select').find('option[selected="selected"]').val());
}
1
OlivierB

Простой способ запуска

 var myselect = $("select.SimpleAddAClass");
 myselect[0].selectedIndex = 0;
 myselect.selectmenu("refresh");
1
daniel_mutu

Свяжите обработчик события с событием 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/

1
Kevin Bowersox

Вы можете сделать это так:

var preval = $('#my_select').val(); // get the def value

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

оформить заказ на скрипке

возьмите var, которая содержит загруженное значение по умолчанию перед событием изменения, затем получите параметр с помощью селектора атрибута значения, а значение var задает для свойства значение selected.

1
Jai

Если вы используете формы Spring, вам, возможно, придется сбросить выбранную метку параметров. Вы установили бы свою форму: выберите значение id для пустой строки, чтобы сбросить ваш выбор до метки по умолчанию.

<form:select path="myBeanAttribute" id="my_select">
    <form:option value="" label="--Select One--"/>
    <form:options items="${mySelectionValueList}"/>
</form:select>

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

в случае, когда есть кнопка сброса. Иначе

$("#my_select").val("");
1
rnyunja

Этот код поможет вам.

<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>

1
Raghav

Для тех, кто работает с Bootstrap-select, вы можете использовать это:

$('#mySelect').selectpicker('render');
1
KJS

Это работает для меня:

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

Вы найдете для опции по умолчанию, которая имеет атрибут выбора, и вы измените выбор на эту опцию.

0
Tomas Prado
$("#reset").on("click", function () {
    $('#my_select').val('-1');
});

http://jsfiddle.net/T8sCf/1323/

0
Sagar Sinha

Я пытался решить это, как и другие ответы, к сожалению, я не получил правильный способ сделать это, как только я попытался, как я пишу ниже:

$('#<%=ddID.ClientID %>').get(0).selectedIndex = 0;

этот код работает для меня, я надеюсь, что это будет полезно для вас, ребята.

С уважением.

Сэмюэл Альварадо.

0
user7507113
$('#my_select').find('option:not(:first)').remove();

Вызывайте эту функцию каждый раз перед заполнением выберите

0
joash

Сбросьте все поля выбора до значения по умолчанию, где выбран выбранный атрибут.

$("#reset").on("click", function () {
    // Reset all selections fields to default option.
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
});
0
Sjoerd Linders