1

基本的に、値が一致する場合、最初の選択ブロックから特定のオプションが選択されたときに、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/

4

2 に答える 2

1

試す

var $subdir = $(".sub_dir");
$(".upload_location").change(function () {
    var arr, location = $(this).val();

    if ($(this).val() == "contact") {
        arr = ['element_01', 'element_02']
    } else if ($(this).val() == "blog") {
        arr = ['place_01', 'place_02']
    }

    $('.picture_slider').toggle(!!arr);
    $subdir.empty()

    if(arr){
        for (var index = 0; index < arr.length; ++index) {
            $subdir.append("<option value='" + arr[index] + "'>" + arr[index] + "</option>");
        }
    }

});

デモ:フィドル

于 2013-09-22T15:16:54.403 に答える
1

新しい値を追加する前に、empty()を使用して値を削除できます。

$(".sub_dir").empty();

for (var index = 0; index < arr.length; ++index) {
    $(".sub_dir").append("<option value='"+arr[index]+"'>"+arr[index]+"</option>");
 }

デモフィドル

于 2013-09-22T15:16:56.667 に答える