Як встановити перший параметр у вікні вибору за допомогою 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);
});

Якщо ви просто хочете скинути вибраний елемент на його перше місце, найпростішим способом може бути:

$('#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();
    });
});

DEMO : 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 для select у функцію form.reset ().

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

Це мені дуже допомагає.

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

Ось як я змусив його працювати, якщо ви просто хочете повернути його до свого першого варіанту, наприклад, "Виберіть параметр" "Select_id_wrap", очевидно, є роздільником навколо вибору, але я просто хочу зробити це зрозумілим на випадок, якщо він має будь-яке відношення до того, як це працює. Моя скидає функцію клацання, але я впевнений, що вона також буде працювати всередині зміни, а також ...

$("#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. Більш загальним способом (з багатьма залежними виборами) було б помістити атрибут за замовчуванням даних у залежний вибір і потім повторити їх при повторному перезавантаженні.

<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");