Как изменить параметры выбора на основе другого выбранного варианта выбора?
вот мой html.
<select id="type">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>
вот jquery, который я пробовал, но не увенчался успехом.
$(document).ready(function() {
if( $("#type").val("item1"))
{
$("#size").html("<option value='test'>test</option><option value="test2">test2</option>);
}
elseif( $("#type").val("item2"))
{
$("#size").html("<option value='anothertest1'>anothertest1</option>");
}
});
в основном то, что я пытаюсь сделать, - это если в #type выбран параметр, тогда для выбора размера заполняются связанные с ним параметры. как я могу это сделать?
спасибо
Ответы
Ответ 1
Вот пример того, что вы пытаетесь сделать => fiddle
$(document).ready(function () {
$("#type").change(function () {
var val = $(this).val();
if (val == "item1") {
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
} else if (val == "item2") {
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
} else if (val == "item3") {
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
} else if (val == "item0") {
$("#size").html("<option value=''>--select one--</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type">
<option value="item0">--Select an Item--</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>
Ответ 2
вы можете использовать тег данных в html5 и сделать это с помощью этого кода:
<script>
$('#mainCat').on('change', function() {
var selected = $(this).val();
$("#expertCat option").each(function(item){
console.log(selected) ;
var element = $(this) ;
console.log(element.data("tag")) ;
if (element.data("tag") != selected){
element.hide() ;
}else{
element.show();
}
}) ;
$("#expertCat").val($("#expertCat option:visible:first").val());
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select id="mainCat">
<option value = '1'>navid</option>
<option value = '2'>javad</option>
<option value = '3'>mamal</option>
</select>
<select id="expertCat">
<option value = '1' data-tag='2'>UI</option>
<option value = '2' data-tag='2'>Java Android</option>
<option value = '3' data-tag='1'>Web</option>
<option value = '3' data-tag='1'>Server</option>
<option value = '3' data-tag='3'>Back End</option>
<option value = '3' data-tag='3'>.net</option>
</select>
Ответ 3
Вот мое простое решение с использованием фильтров Jquery.
$('#publisher').on('change', function(e) {
let selector = $(this).val();
$("#site > option").hide();
$("#site > option").filter(function(){return $(this).data('pub') == selector}).show();
});
JSFIDDLE
Ответ 4
Вы можете использовать регистр переключения следующим образом:
$(document).ready(function () {
$("#type").change(function () {
switch($(this).val()) {
case 'item1':
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
break;
case 'item2':
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
break;
case 'item3':
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
break;
default:
$("#size").html("<option value=''>--select one--</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
<option value="item0">--Select an Item--</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>
Ответ 5
Оператор if устанавливает значение. Вы хотите сравнить это, сделав это
if ($("#type").val() == "item1") {
...
}
daLizard прав. Вам нужен обработчик событий. document.ready работает только один раз, когда страница DOM готова к использованию.
Ответ 6
Я не цитирую, что вы пытаетесь достичь, но вам нужен прослушиватель событий. Что-то вроде:
$('#type').change(function() {
alert('Value changed to ' + $(this).attr('value'));
});
Это даст вам значение выбранного тега опции.
Ответ 7
в качестве дополнительного ответа на @Navid_pdp11, который позволит выбрать первый видимый элемент, а также работать при загрузке документа.
поместите следующее ниже тега
<script>
$('#mainCat').on('change', function() {
let selected = $(this).val();
$("#expertCat option").each(function(){
let element = $(this) ;
if (element.data("tag") != selected){
element.removeClass('visible');
element.addClass('hidden');
element.hide() ;
}else{
element.removeClass('hidden');
element.addClass('visible');
element.show();
}
});
let expertCat = $('#expertCat');
expertCat.prop('selectedIndex',expertCat.find("option.visible:eq(0)").index());
}).triggerHandler('change');
</script>
