How to create dropdown list using json data

Question

I have pulled data from mysql table and decode json_decode now we have json array for board,class,subject and they are related like parent ->child->grandchild(board->class->subject) board_auto_id is first of classList json array class_auto_id is the first index of classSubjectList

Note : I have posted partial array of classList and classSubjectList

var boardList           =[{"board_auto_id":"1","board_name":"CBSE"},{"board_auto_id":"2","board_name":"ICSE"},{"board_auto_id":"3","board_name":"NCERT"}];
var classList          = {"1":[{"class_auto_id":"1","class_name":"VI"},{"class_auto_id":"2","class_name":"VII"},{"class_auto_id":"3","class_name":"VIII"},{"class_auto_id":"4","class_name":"IX"},{"class_auto_id":"5","class_name":"X"},{"class_auto_id":"6","class_name":"XI"},{"class_auto_id":"7","class_name":"XII"}]};
var classSubjectList   = {"1":[{"class_auto_id":"1","sub_auto_id":"1","subject_name":"Science"},{"class_auto_id":"1","sub_auto_id":"2","subject_name":"Mathematics"},{"class_auto_id":"1","sub_auto_id":"3","subject_name":"Geography : The Earth Our Habitat "},{"class_auto_id":"1","sub_auto_id":"4","subject_name":"History : Our Pasts - I"},{"class_auto_id":"1","sub_auto_id":"5","subject_name":"Civics : Social And Political Life-I"},{"class_auto_id":"1","sub_auto_id":"86","subject_name":"English : Grammar"},{"class_auto_id":"1","sub_auto_id":"139","subject_name":"English : Writing Skills"},{"class_auto_id":"1","sub_auto_id":"155","subject_name":"English : Reading"},{"class_auto_id":"1","sub_auto_id":"209","subject_name":"&#2360;&#2306;&#2360;&#2381;&#2325;&#2371;&#2340; : &#2357;&#2381;&#2351;&#2366;&#2325;&#2352;&#2339;"},{"class_auto_id":"1","sub_auto_id":"220","subject_name":"Computer Science"},{"class_auto_id":"1","sub_auto_id":"235","subject_name":"Literature in English ( NCERT)"},{"class_auto_id":"1","sub_auto_id":"238","subject_name":"&#2361;&#2367;&#2306;&#2342;&#2368; &#2357;&#2381;&#2351;&#2366;&#2325;&#2352;&#2339;"},{"class_auto_id":"1","sub_auto_id":"253","subject_name":"English : Vocabulary"}],"2":[{"class_auto_id":"2","sub_auto_id":"6","subject_name":"Science"},{"class_auto_id":"2","sub_auto_id":"7","subject_name":"Mathematics"},{"class_auto_id":"2","sub_auto_id":"8","subject_name":"Geography : Our Environment"},{"class_auto_id":"2","sub_auto_id":"9","subject_name":"History : Our Pasts - II"},{"class_auto_id":"2","sub_auto_id":"10","subject_name":"Civics : Social And Political Life - II"},{"class_auto_id":"2","sub_auto_id":"87","subject_name":"English : Grammar"},{"class_auto_id":"2","sub_auto_id":"140","subject_name":"English : Writing Skills"},{"class_auto_id":"2","sub_auto_id":"154","subject_name":"English : Reading"},{"class_auto_id":"2","sub_auto_id":"210","subject_name":"&#2360;&#2306;&#2360;&#2381;&#2325;&#2371;&#2340; : &#2357;&#2381;&#2351;&#2366;&#2325;&#2352;&#2339;"},{"class_auto_id":"2","sub_auto_id":"213","subject_name":"Computer Science"}]}

HTML code

<select name="boardId" id="boardId" class="style1"><option value="">Select Board</option></select>
<select name="classId" id="classId" class="style1"><option value="">Select Class</option></select>
<select name="subjectId" id="subjectId" class="style1"><option value="">Select Subject</option></select>

Do you want multiple, related drop-down lists? Can you post more detail? — GHC
– GHC, Commented Mar 18, 2015 at 7:49
yse i want to create related dropdown using json instead of ajax — Navjot Singh
– Navjot Singh, Commented Mar 18, 2015 at 7:53

Mox Shah · Accepted Answer · 2015-03-18 07:47:21Z

1

You can do something like this to bind json to dropdown

<select id="boardList"></select>

  $.each(boardList, function (key, value) {
             console.log(value.board_auto_id);
             appenddata += "<option value = '" + value.board_auto_id + " '>" + value.board_name + " </option>";                        
         });
        $('#boardList').html(appenddata);

OnChange of boardList dropdown you need to filter records from another jsonArray and bind it to the next dropDown same as mentioned in above code.

answered Mar 18, 2015 at 7:47

Mox Shah

3,0153 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj katiyar · Accepted Answer · 2015-03-18 08:02:30Z

first display board by using

jQuery.each(boardList, function(i , item) {
       selectedBoard='';// if you display no board selected 
       boardListHtml += '<option '+ selectedBoard +'   value="'+item.board_auto_id+'">'+item.board_name+'</option>';
    });

jQuery('#boardId').html(boardListHtml);

create function for class and subject for each call

function getBoardByClass(boardId){
    jQuery('#classId').html('');
    var classChapterListHtml = '<option value="">Select Class</option>';
    jQuery.each(classList, function(i , item) {
       var selectedClass = (boardId ==item.class_auto_id) ? 'selected' : '';    
       classChapterListHtml += '<option '+ selectedClass +'   value="'+item.class_auto_id+'">'+item.class_name+'</option>';
    });
    jQuery('#classId').html(classChapterListHtml);

}


function getSubjectByClass(classID){

    jQuery('#subjectId').html('');
    var subjectListHtml = '<option value="">Select Subject</option>';
    jQuery.each(classSubjectList, function(id , subjectList) {
            if (classID==id) {
            jQuery.each(subjectList, function(subIds , subjectName) {

                subjectListHtml += '<option value="'+subjectName.sub_auto_id+'">'+subjectName.subject_name+'</option>';

                });

            }

    });

    jQuery('#subjectId').html(subjectListHtml);

}

and finally change event for class and subject filter

$("#boardId").change(function() {
        jQuery('#classId').html('');
        getBoardByClass($(this).val());

        });

$("#classId").change(function() {
        jQuery('#subjectId').html('');
        getSubjectByClass($(this).val());

        });

Collectives™ on Stack Overflow

How to create dropdown list using json data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related