0

私はここで初心者です..私がここで間違った質問をしている場合はお許しください。最初のドロップダウンからの値の選択に基づいて2番目が自動的に更新される2つのドロップダウンボックスを持つ動的ページを開発しています。jquery $ .htmlを使用して2番目のドロップダウンを自動的に更新します。

$("#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 オブジェクトを試して、2 番目のドロップダウンに入力したいと思います。私の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 を選択すると、2 番目のドロップダウンで 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 に答える