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

У меня есть два selectполя HTML . Мне нужно сбросить один 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"), мне нужно сбросить второй selectна select all; аналогично, когда я выбираю второй вариант select(т.е. id="name2"), мне нужно сбросить первый selectна select all.

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

Нечто подобное должно сработать: https://jsfiddle.net/TmJCE/898/

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


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

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

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

Чтобы сбросить все выбранные элементы в документе:

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

РЕДАКТИРОВАТЬ: Чтобы уточнить в соответствии с комментарием ниже, это сбрасывает элемент выбора к его первой пустой записи и только если пустая запись существует в списке.

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

Вот правильное решение, которое учитывает selectedсвойство:

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

ДЕМО : http://jsfiddle.net/weg82/257/

Оригинальный ответ - НЕПРАВИЛЬНО

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

Вот как обработать его с помощью элемента случайной опции, определенного как значение по умолчанию (в этом случае по умолчанию используется текст 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>

Вы можете попробовать это:

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

У меня была проблема с использованием свойства 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/ для рабочей версии выше.

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

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

Используйте 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;
    }
});

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

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

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

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

Настройка опции 1 в элементе выбора может быть выполнена этим сегментом. Чтобы визуально показать это, у вас есть tp add .trigger ('change') в конце.

$('#name').removeAttr('selected').find('option:first').attr('selected', 'selected').trigger("change");