Question

iam newbie here ..如果我在这里提出错误的问题，请执行。 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']);

Answer 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>

json jquery迭代

1 个答案: