0

我是新手。如果我在这里问错问题，请执行。我正在开发具有两个下拉框的动态页面，其中第二个下拉框根据从第一个下拉列表中选择的值自动刷新。iam 使用 jquery $.html 自动刷新第二个下拉框。

$("#subcategory").html('<select name="sub_category" class="valid" id="subcategory"><option>Art - Classes</option><option>Beautician Courses</option><option>Computer - Multimedia Classes</option><option>Cooking - Classes</option><option>Hobby - Classes</option><option>Language Classes</option><option>Motor driving - Classes</option><option>Music - Theatre - Dance Classes</option><option>Professional courses - tutions</option><option>Summer - Camps</option><option>Training Instutions</option><option>Tutoring - Private Lessons</option><option>Other Classes</option></select>').show();

而不是上面一个，我想尝试使用 json 对象并填充第二个下拉列表。我的 json 数据如下：

var data = {
  cat_1: {
    {"id": "1",
    "sub_cat": "sub1"},
   {"id":"2",
   "sub_cat":"sub2"}

  },
  cat_2: {
    {"id": "3",
    "sub_cat": "sub3"},
   {"id":"4",
   "sub_cat":"sub4"}
  }
};

如果用户选择类别 1，则下拉菜单应填充来自 cat_1 的值。

我使用下面的代码。但我不知道根据第一个下拉菜单的选择在哪里限制或过滤

 $.each(data, function(index, array,array1) {
               // options[options.length] = new Option(array['variety']);
            options[options.length] =new Option(array['id'],array['sub_cat']);
4

1 回答 1

1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = { 'cat_1': [{ "id": "1", "sub_cat": "sub1" }, { "id": "2", "sub_cat": "sub2"}],
                'cat_2': [{ "id": "3", "sub_cat": "sub3" }, { "id": "4", "sub_cat": "sub4"}]
            };
            //ggg

            $('#ddlCat').on('change', function (e) {
                $('#ddlSubCat').html('');
                if (data[$(this).val()] !== undefined) {
                    $.each(data[$(this).val()], function (i, entity) {
                        $('#ddlSubCat').append($('<option />', { 'value': entity.id, 'text': entity.sub_cat }));
                    });
                }
            });

            $('#ddlCat').trigger('change');
        });
    </script>
</head>
<body>
    <div id="subcategory">
        <select id="ddlCat">
            <option value="cat_1">cat_1</option>
            <option value="cat_2">cat_2</option>
        </select>
        <select id="ddlSubCat">
        </select>
    </div>
</body>
</html>
于 2012-05-15T13:47:29.880 回答