Ответ 1
Что-то вроде этого должно сделать трюк: https://jsfiddle.net/TmJCE/898/
$('#name2').change(function(){
$('#name').prop('selectedIndex',0);
});
$('#name').change(function(){
$('#name2').prop('selectedIndex',0);
});
У меня есть два 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
.
Как я могу это сделать?
Что-то вроде этого должно сделать трюк: https://jsfiddle.net/TmJCE/898/
$('#name2').change(function(){
$('#name').prop('selectedIndex',0);
});
$('#name').change(function(){
$('#name2').prop('selectedIndex',0);
});
Если вы просто хотите reset выбрать элемент для него в первой позиции, самым простым способом может быть:
$('#name2').val('');
В reset все элементы выбираются в документе:
$('select').val('')
EDIT: для пояснения в соответствии с приведенным ниже замечанием, это сбрасывает элемент select в его первую пустую запись и только в том случае, если в списке существует пустая запись.
Как указано в комментариях @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') );
});
Используйте это, если вы хотите reset выбрать параметр, который имеет атрибут "selected". Работает аналогично функции form.reset() встроенной функции javascript для выбора.
$("#name").val($("#name option[selected]").val());
Это очень помогает мне.
$(yourSelector).find('select option:eq(0)').prop('selected', true);
Используйте приведенный ниже код. См. Здесь работающий 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('');
});
Вот как я получил его, чтобы работать, если вы просто хотите вернуть его к своему первому варианту, например. "Выберите опцию" "Select_id_wrap" - это, очевидно, div вокруг выбора, но я просто хочу сделать это понятным на всякий случай, если это повлияет на то, как это работает. Mine сбрасывается на функцию щелчка, но я уверен, что он будет работать и внутри изменения...
$("#select_id_wrap").find("select option").prop("selected", false);
Это самый гибкий/многоразовый способ для reset всех выбранных полей в вашей форме.
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;
}
});
Используйте этот код для 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>
Вот лучшее решение im, использующее. Это применимо для более 1 slectbox
$("select").change(function(){
var thisval = $(this).val();
$("select").prop('selectedIndex',0);
$(this).val(thisval);
})
Очень просто:
$('#DropdownToRestId').find('option:selected').val('');