基本的に、値が一致する場合、最初の選択ブロックから特定のオプションが選択されたときに、2番目の「選択」ブロックを表示しようとしています。これが発生した場合、2 番目の選択オプションは JavaScript 配列から取り込まれます。
最初のステップはなんとか完了しましたが、2 番目のステップで苦労しています。オプションが再度変更されない限り、append の使用は正常に機能します。それ以外の場合は、さらに多くの配列値をオプションに追加します。
HTML:
<select class='upload_location' name='upload_location'>
<option value="home" selected="selected">Home</option>
<option value="contact">Contact</option>
<option value="blog">Blog</option>
</select>
<div class='picture_slider' style='display:none;'>
<select name='sub_dir' class='sub_dir'>
// Add elements here
</select>
</div>
jQuery:
<script type="text/javascript">
$(".upload_location").change(function(){
if ($(this).val() == "contact") {
$('.picture_slider').show();
var arr = ['element_01', 'element_02']
} else if ($(this).val() == "blog") {
$('.picture_slider').show();
var arr = ['place_01', 'place_02']
}
for (var index = 0; index < arr.length; ++index) {
$(".sub_dir").append("<option value='"+arr[index]+"'>"+arr[index]+"</option>");
}
});
</script>
現在の仕組みの例を次に示します: http://jsfiddle.net/G8rdL/