Home/ Questions/Q 7958923
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T04:29:38+00:00

iam newbie here.. please execuse if iam asking wrong question here. iam developing dynamic

  • 0

iam newbie here.. please execuse if iam asking wrong question here.
iam developing dynamic page having two drop down boxes in which second automatically refreshed based on selection of value from first drop down.iam using jquery $.html to automatically refresh second drop down.

$("#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();

instead of above one i would like to try with json object and populate second drop down.
my json data will be as below:

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"}
  }
};

if user selects category 1 second drop down should populate value from cat_1.

iam using below code. but i dont know where to restrict or filter based on selection from first drop down

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!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>
    • 0