Как установить первый вариант в поле выбора с помощью jQuery?

У меня есть два HTML select. Мне нужно reset один select, когда я делаю выбор в другом.

<select id="name" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

Когда я выбираю опцию первого select (т.е. id="name"), мне нужно reset второй select - select all; аналогично, когда я выбираю опцию второго select (т.е. id="name2"), мне нужно reset первый select до select all.

Как я могу это сделать?

ОТВЕТЫ

Ответ 1

Что-то вроде этого должно сделать трюк: https://jsfiddle.net/TmJCE/898/

$('#name2').change(function(){
    $('#name').prop('selectedIndex',0);
});


$('#name').change(function(){
    $('#name2').prop('selectedIndex',0);
});

Ответ 2

Если вы просто хотите reset выбрать элемент для него в первой позиции, самым простым способом может быть:

$('#name2').val('');

В reset все элементы выбираются в документе:

$('select').val('')

EDIT: для пояснения в соответствии с приведенным ниже замечанием, это сбрасывает элемент select в его первую пустую запись и только в том случае, если в списке существует пустая запись.

Ответ 3

Как указано в комментариях @PierredeLESPINAY, мое исходное решение было неправильным - оно было бы reset раскрывающимся списком для самой верхней опции, но только потому, что возвращаемое значение undefined было разрешено для индекса 0.

Здесь правильное решение, учитывающее свойство selected:

$('#name').change(function(){
    $('#name2').val(function () {
        return $(this).find('option').filter(function () {
            return $(this).prop('defaultSelected');
        }).val();
    });
});

DEMO: http://jsfiddle.net/weg82/257/

Оригинальный ответ - INCORRECT

В jQuery 1.6+ вам нужно использовать метод .prop, чтобы получить выбор по умолчанию:

// Resets the name2 dropdown to its default value
$('#name2').val( $('#name2').prop('defaultSelected') );

Чтобы динамически было reset при первом изменении раскрывающегося списка, используйте событие .change:

$('#name').change(function(){
  $('#name2').val( $('#name2').prop('defaultSelected') );
});

Ответ 4

Используйте это, если вы хотите reset выбрать параметр, который имеет атрибут "selected". Работает аналогично функции form.reset() встроенной функции javascript для выбора.

 $("#name").val($("#name option[selected]").val());

Ответ 5

Это очень помогает мне.

$(yourSelector).find('select option:eq(0)').prop('selected', true);

Ответ 6

Используйте приведенный ниже код. См. Здесь работающий http://jsfiddle.net/usmanhalalit/3HPz4/

 $(function(){
     $('#name').change(function(){
         $('#name2 option[value=""]').attr('selected','selected');
     });

     $('#name2').change(function(){
         $('#name option[value=""]').attr('selected','selected');
     });
 });

Ответ 7

Это также можно использовать

$('#name2').change(function(){
    $('#name').val('');//You can set the first value of first one if that is not empty
});


$('#name').change(function(){
    $('#name2').val('');
});

Ответ 8

Вот как я получил его, чтобы работать, если вы просто хотите вернуть его к своему первому варианту, например. "Выберите опцию" "Select_id_wrap" - это, очевидно, div вокруг выбора, но я просто хочу сделать это понятным на всякий случай, если это повлияет на то, как это работает. Mine сбрасывается на функцию щелчка, но я уверен, что он будет работать и внутри изменения...

$("#select_id_wrap").find("select option").prop("selected", false);

Ответ 9

Это самый гибкий/многоразовый способ для reset всех выбранных полей в вашей форме.

      var $form = $('form') // Replace with your form selector
      $('select', $form).each(function() {
        $(this).val($(this).prop('defaultSelected'));
      });

Ответ 10

Здесь, как обрабатывать его со случайным элементом параметра, определенным как значение по умолчанию (в этом случае текст 2 по умолчанию):

<select id="name2" >
   <option value="">select all</option>
   <option value="1">Text 1</option>
   <option value="2" selected="selected">Text 2</option>
   <option value="3">Text 3</option>
</select>
<script>
    $('#name2 option[selected]').prop('selected', true);
</script>

Ответ 11

Вы можете попробовать следующее:

$( 'select' ).each( function () {
    if ( $( this ).children().length > 0 ) {
        $( $( this ).children()[0] ).attr( 'selected', 'selected' );
        $( this ).change();
    }
} );

Ответ 12

У меня возникла проблема с использованием свойства defaultSelected в ответе @Jens Roland в jQuery v1.9.1. Более общий способ (со многими зависимыми выборами) заключается в том, чтобы поместить атрибут data-default в ваши зависимые отборные элементы, а затем повторить их при перепродаже.

<select id="name0" >
    <option value="">reset</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name1" class="name" data-default="1">
    <option value="">select all</option>
    <option value="1" selected="true">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" class="name" data-default="2">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2" selected="true">Text 2</option>
    <option value="3">Text 3</option>
</select>

И javascript...

$('#name0').change(function(){
    if($('#name0').val() == '') {
        $('select.name').each(function(index){
          $(this).val($(this).data('default'))  
        })
    } else {
      $('select.name').val($('#name0').val() );
    }
});

См. http://jsfiddle.net/8hvqN/ для рабочей версии выше.

Ответ 13

Я создал новую опцию в теге select, которая имеет значение пустой строки ("") и используется:

$("form.query").find('select#topic').val("");

Ответ 14

Использовать jquery для привязки события onchange для выбора, но вам не нужно создавать другой объект $(this) jquery.

$('select[name=name2]').change(function(){
    if (this.value) {
        console.log('option value = ', this.value);
        console.log('option text  = ', this.options[this.selectedIndex].text);

        // Reset selected
        this.selectedIndex = this.defaultSelected;
    }
});

Ответ 15

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

<select id="name1" >
    <option value="1">Text 1</option>
    <option value="2" selected="selected" >Default Text 2</option>
    <option value="3">Text 3</option>
</select>
<select id="name2" >
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3" selected="selected" >Default Text 3</option>
</select>
<script>
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
</script>

Ответ 16

Вот лучшее решение im, использующее. Это применимо для более 1 slectbox

$("select").change(function(){
    var thisval = $(this).val();
    $("select").prop('selectedIndex',0);
    $(this).val(thisval);
})

Ответ 17

Очень просто:

$('#DropdownToRestId').find('option:selected').val('');