Json Dropdown list

Question

When I click on the department to install the subject, the services to install when I click on the subject. But matters did not see when I click on services. I think it is inaccurate to describe the json. Can you help me with this. Thank you. My Jquery Code;

/* <![CDATA[ */

(function($) {

$.fn.changeType = function(){

    var data = [
        {
        "department": "IT",
        "subject": [
                {"title":"Programmer",
                        "services" :[
                        {"name":"example1"},
                        {"name":"example2"}
                                  ]

                },
                {"title":"Solutions Architect"},
                {"title":"Database Developer"}
                ]
        },
        {"department": "Accounting",
        "subject": [
                {"title":"Accountant"},
                {"title":"Payroll Officer"},
                {"title":"Accounts Clerk"},
                {"title":"Analyst"},
                {"title":"Financial Controller"}
                ]
        },
        {
        "department": "HR",
        "subject": [
                {"title":"Recruitment Consultant"},
                {"title":"Change Management"},
                {"title":"Industrial Relations"}
                ]
        },
        {
        "department": "Marketing",
        "subject": [
                {"title":"Market Researcher"},
                {"title":"Marketing Manager"},
                {"title":"Marketing Co-ordinator"}
                ]
        }
        ]

        var options_departments = '<option>Select<\/option>';
        $.each(data, function(i,d){
            options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
        });
        $("select#departments", this).html(options_departments);

        $("select#departments", this).change(function(){
            var index = $(this).get(0).selectedIndex;
            var d = data[index-1];  // -1 because index 0 is for empty 'Select' option
            var options = '';
            if (index > 0) {
                $.each(d.subject, function(i,j){
                            options += '<option value="' + j.title + '">' + j.title + '<\/option>';
                });
            } else {
                options += '<option>Select<\/option>';
            }
            $("select#subject").html(options);
        })
};


        $("select#subject", this).change(function(){
            var index = $(this).get(0).selectedIndex;
            var j = data[index-1];  // -1 because index 0 is for empty 'Select' option
            var options = '';
            if (index > 0) {
                $.each(j.services, function(i,b){
                            options += '<option value="' + b.name + '">' + b.name + '<\/option>';
                });
            } else {
                options += '<option>Select<\/option>';
            }
            $("select#services").html(options);
        })




})(jQuery);

$(document).ready(function() {
    $("form#search").changeType();
});

/* ]]> */

My html code;

<form id="search" action="" name="search">
    <select name="departments" id="departments">
        <option>Select</option>
    </select>

    <select name="subject" id="subject">
        <option>Select</option>
    </select>

    <select name="services" id="services">
        <option>Select</option>
    </select>

</form>

So your problem is that you want to display the related services in the third select? — Nicola Peluchetti
– Nicola Peluchetti, Commented Aug 27, 2011 at 12:29
Ok, i posted an answer where you see values in the third select. — Nicola Peluchetti
– Nicola Peluchetti, Commented Aug 27, 2011 at 12:42

Nicola Peluchetti · Accepted Answer · 2011-08-27 13:10:58Z

1

I edited your code and now it works (check it by selecting the first "IT" then "Programmer" in the fiddle). Of course if there are no "Services" nothing is shown in the third select. You should add some logic to it so that it shows the third select only if there are services related to your subject

(function($) {


    var data = [
        {
        "department": "IT",
        "subject": [
            {
            "title": "Programmer",
            "services": [
                {
                "name": "example1"},
            {
                "name": "example2"}
                          ]

            },
        {
            "title": "Solutions Architect"},
        {
            "title": "Database Developer"}
        ]},
    {
        "department": "Accounting",
        "subject": [
            {
            "title": "Accountant"},
        {
            "title": "Payroll Officer"},
        {
            "title": "Accounts Clerk"},
        {
            "title": "Analyst"},
        {
            "title": "Financial Controller"}
        ]},
    {
        "department": "HR",
        "subject": [
            {
            "title": "Recruitment Consultant"},
        {
            "title": "Change Management"},
        {
            "title": "Industrial Relations"}
        ]},
    {
        "department": "Marketing",
        "subject": [
            {
            "title": "Market Researcher"},
        {
            "title": "Marketing Manager"},
        {
            "title": "Marketing Co-ordinator"}
        ]}
    ]
    var selectedDepartment, selectedSubject;

    $.fn.changeType = function() {

        var options_departments = '<option>Select<\/option>';
        $.each(data, function(i, d) {
            options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
        });
        $("select#departments", this).html(options_departments);

        $("select#departments").change(function() {
            var index = $(this).get(0).selectedIndex;

            var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
            selectedDepartment = d;
            var options = '';
            if (index > 0) {
                options += '<option>Select<\/option>';
                $.each(d.subject, function(i, j) {
                    options += '<option value="' + j.title + '">' + j.title + '<\/option>';
                });
            } else {
                options += '<option>Select<\/option>';
            }
            $("select#subject").html(options);
        })
    };


    $("select#subject").change(function() {
        var index = $(this).get(0).selectedIndex;
        selectedSubject = selectedDepartment.subject[index -1];
        var options = '';
        if (index > 0) {
            $.each(selectedSubject.services, function(i, b) {
                options += '<option value="' + b.name + '">' + b.name + '<\/option>';
            });
        } else {
            options += '<option>Select<\/option>';
        }
        $("select#services").html(options);
    })




})(jQuery);

$(document).ready(function() {
    $("form#search").changeType();
});

Fiddle here:

http://jsfiddle.net/fF38L/

EDIT - to make it work on IE8 take off the console.log()

http://jsfiddle.net/fF38L/1/

edited Aug 27, 2011 at 13:10

answered Aug 27, 2011 at 12:41

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

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

5 Comments

Gürkan Pala Over a year ago

Nicola,Thank you for showing interest in my question really. But jsfiddle.net/fF38L running this code not work again. When I selected IT show (Programmer,Solutions Architect,Database Developer). But When I selected Programmer not show (example1,example2)

Nicola Peluchetti Over a year ago

It works for me: what browser are you using?I tested it on firefox and chrome and it works

Gürkan Pala Over a year ago

Yes it works on firefox. But I am use this code my panel. never know what browser and will enter. internet explorer, the console is undefined error

Nicola Peluchetti Over a year ago

Yes i corrected that by taking off all console.log() calls and it should work in the new fiddle

Gürkan Pala Over a year ago

Thanks Nicola it works now in ie8. Really been very helpful in this regard.

genesis · Accepted Answer · 2011-08-27 10:36:10Z

0

Try var data = eval('your json-string'), that should work, I think.

edited Aug 27, 2011 at 10:36

genesis

51.1k20 gold badges99 silver badges127 bronze badges

answered Aug 27, 2011 at 10:33

C. E.

10.7k11 gold badges57 silver badges81 bronze badges

3 Comments

David Hoerster Over a year ago

If you listen to Douglas Crockford, eval is evil. You should consider using the json2.js script and calling var data = JSON.parse('your_json_string'); instead. It will insulate you from potential scripting attacks or malicious "json" data.

Gürkan Pala Over a year ago

Thanks for answers. But I could not get the result. Change second selectbox show this values in third selectbox. How can I do this?.

C. E. Over a year ago

um.. I probably misunderstood the problem :/

Collectives™ on Stack Overflow

Json Dropdown list

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related