1

本质上，如果值匹配，则当从第一个选择块中选择某个选项时，我试图显示第二个“选择”块。如果发生这种情况，第二个选择选项将从 javascript 数组中填充。

我已经设法完成了第一步，但是我正在努力完成第二步。如果选项不再更改，则使用 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 回答