私はjqueryを初めて使用します。これを検索してみましたが、良い例が見つかりません。
2 つのドロップダウン リストを使用して選択プロセスを作成しようとしています。各リストには 3 つのオプションがあります。ユーザーはリスト 1 からオプションを選択し、次にリスト 2 からオプションを選択します。これらのオプションの組み合わせにより、特定の div ショーが作成されます。
その後、ユーザーがリストの選択の 1 つを変更すると、div が変更されて新しい組み合わせが反映されます。
少なくとも組み合わせの1つを機能させようとしましたが、できません。これまでのところ、私は持っています:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.boxy').hide();
$('#option1option3').show();
$("#selectField1, #selectField2").on("change", function(){
$('.boxy').hide();
$('#'+$('#selectField1')+$('#selectField2').val()).show();
});
});
</script>
<select id="selectField1">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
<select id="selectField2">
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<div id="option1option3" class="boxy">Content 1 and 3</div>
<div id="option1option4" class="boxy">Content 1 and 4</div>
<div id="option2option3" class="boxy">Content 2 and 3</div>
<div id="option2option4" class="boxy">Content 2 and 4</div>
単一のリストと div (ここのように) を使用してこれを行うことができますが、上記で説明したように実装する方法がわかりません。
助けてくれてありがとう