Как изменить параметры выбора на основе другого выбранного варианта выбора?

вот мой 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>