選択した別の選択オプションに基づいて選択オプションを変更する方法は？

Question

ここは私の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> 

ここでは試してみましたが、失敗しました。

$(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で選択されているならば、選択サイズは、それに関連するオプションが移入されています。これどうやってするの？ここで

おかげ

Answer 1

は、あなたがやろうとしているものの例です。

http://jsfiddle.net/YPsqQ/

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

Answer 2

あなたの場合ステートメントは値を設定しています。あなたはこれを行うことでそれを比較したいと思います。

if ($("#type").val() == "item1") { 
... 
} 

daLizardが正しいです。イベントハンドラが必要です。 document.readyは、ページDOMを使用できる状態になったときに一度だけ実行されます。

Answer 3

私はあなたが達成しようとしていることを理解していませんが、イベントリスナーが必要です。何かのように：

$('#type').change(function() { 
    alert('Value changed to ' + $(this).attr('value')); 
}); 

これはあなたに選択されたオプションタグの値を与えます。

Answer 4

あなたはHTML5でデータ・タグを使用して、このこのコードを使用して行うことができます。ここでは

<script> 
 
\t $('#mainCat').on('change', function() { 
 
\t \t var selected = $(this).val(); 
 
\t \t $("#expertCat option").each(function(item){ 
 
\t \t \t console.log(selected) ; 
 
\t \t \t var element = $(this) ; 
 
\t \t \t console.log(element.data("tag")) ; 
 
\t \t \t if (element.data("tag") != selected){ 
 
\t \t \t \t element.hide() ; 
 
\t \t \t }else{ 
 
\t \t \t \t element.show(); 
 
\t \t \t } 
 
\t \t }) ; 
 
\t \t 
 
\t \t $("#expertCat").val($("#expertCat option:visible:first").val()); 
 
\t \t 
 
}); 
 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<select id="mainCat"> 
 
\t \t \t <option value = '1'>navid</option> 
 
\t \t \t <option value = '2'>javad</option> 
 
\t \t \t <option value = '3'>mamal</option> 
 
\t \t </select> 
 
\t \t 
 
\t \t <select id="expertCat"> 
 
\t \t \t <option value = '1' data-tag='2'>UI</option> 
 
\t \t \t <option value = '2' data-tag='2'>Java Android</option> 
 
\t \t \t <option value = '3' data-tag='1'>Web</option> 
 
\t \t \t <option value = '3' data-tag='1'>Server</option> 
 
\t \t \t <option value = '3' data-tag='3'>Back End</option> 
 
\t \t \t <option value = '3' data-tag='3'>.net</option> 
 
\t \t </select>