Home/ Questions/Q 7056843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:54:54+00:00

I have 3 dropdowns. Depending on the first i need to show different options

  • 0

I have 3 dropdowns. Depending on the first i need to show different options in the 2nd and 3rd.
Options are known so to avoid AJAX i putted all the available options in the dropdown and gave them class names to be able to target the options. Example below:

First drop down:

<select name="language" id="language">
<option value="0" disabled="disabled" selected="selected">Select ...</option>
<option value="DA">Danish - DA</option>
<option value="EN">English - EN</option>
</select>

Second drop down: (.queryall is used to remove all the option when changing selection, .queryda is used to show all the option for Danish, .queryen is used to show all the option for English)

<select name="status" id="status">
<option value="0" disabled="disabled" selected="selected">Select ...</option>
<option class="queryall queryda">Answered</option>
<option class="queryall queryda queryen">Closed</option>
<option class="queryall queryen">Escalated</option>
</select>

jQuery:

<script>
$("#language").change(function() {
$("#status .queryall").hide();
$("#status .queryac").show();
alert("New Status options are available.");
});
</script>

Here is the question, how to pass a param “queryda” when changing language to Danish?

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    • Create folder in which you gonna test it, say “test.com”
    • Create under this folder two more just for organization: “css” and “js”

    • Create folder called “jquery” inside “js”

    • Create in your “test.com” folder file called “index.html”

    • Create in your “css” folder file called “main.css”
    • Create in your “js” folder two files called: “main.js” and “data.js”
    • Download jQuery (1.7.1) version from It’s website http://www.jquery.com download and place it in your “test.com/js/jquery” folder, to avoid naming issues, name the jQuery file: “jquery-1.7.1.min.js” or fix the link in “index.html”

    Alright, routine work finished, now to the code.

    This is your “index.html” code:

    <html>
<head>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Dynamic Selects</title>
</head>
<body>
    <div id="data"></div><!-- we will load the data JSON string here //-->
    <div id="wrapper">
        <div id="boxes">
            <select name="language" id="language" class="select">
                <option value="0" disabled="disabled" selected="selected">Select Language</option>
            </select>

            <select name="status" id="status" class="select">
                <option value="0" disabled="disabled" selected="selected">Select Status</option>
            </select>

            <select name="file" id="file" class="select">
                <option value="0" disabled="disabled" selected="selected">Select Files</option>
            </select>
        </div>
    </div>
</body>

    This is your “main.css” code:

    body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: #ddd;
}

#wrapper {
width: 100%;
height: 100%;
}

#boxes {
width: 500px;
margin: 0 auto;
padding: 100px 0px;
}

.select {
width: 160px;
height: 20px;
background-color: #ddd;
}

#data {
display: none;
}

.highlighted {
border: 1px solid red;
}

    This is your “data.js” code:

    var dataObject = {
"EN": {
    "title": "English EN",
    "status":
        [{
            "title": "Answered"
            ,"questions":
                [
                    {"q1":"Question 1"}
                    ,{"q2":"Question 2"}
                    ,{"q3":"Question 3"}
                    ,{"q4":"Question 4"}
                ]
        },
        {
            "title": "Closed"
            ,"questions":
                [
                    {"q5":"Question 5"}
                    ,{"q6":"Question 6"}
                    ,{"q7":"Question 7"}
                    ,{"q8":"Question 8"}
                ]
        },
        {
            "title": "Escalated"
            ,"questions":
                [
                    {"q9":"Question 9"}
                    ,{"q10":"Question 10"}
                    ,{"q11":"Question 11"}
                    ,{"q12":"Question 12"}
                ]
        }]
},

"DA": {
    "title": "Danish DA",
    "status":
        [{
            "title": "Answered DA"
            ,"questions":
                [
                    {"qda1":"Question DA 1"}
                    ,{"qda2":"Question DA 2"}
                    ,{"qda3":"Question DA 3"}
                    ,{"qda4":"Question DA 4"}
                ]
        },
        {
            "title": "Closed DA"
            ,"questions":
                [
                    {"qda5":"Question DA 5"}
                    ,{"qda6":"Question DA 6"}
                    ,{"qda7":"Question DA 7"}
                    ,{"qda8":"Question DA 8"}
                ]
        },
        {
            "title": "Escalated DA"
            ,"questions":
                [
                    {"qda9":"Question DA 9"}
                    ,{"qda10":"Question DA 10"}
                    ,{"qda11":"Question DA 11"}
                    ,{"qda12":"Question DA 12"}
                ]
        }]
}
};

    And at last, the whole functionality, this is your “main.js” file:

    var url = 'js/data.js'; // URL to data file. could be full or relative

// Select box names (ids)
var langSelect = 'language';
var statusSelect = 'status';
var questionSelect = 'file';

// Load the data object externally
$.getScript(url,function(){});

// on document load, do whatever you need
$(document).ready(function() {  

});

$(document).ajaxComplete(function(r){
    // fire when any Ajax requests complete (we get our data from server)
dMgr.populateLang();
})

// data manager object. using: dMgr.functionName(); <-- will populate the linked select     box with chosen data.
var dMgr = {
// function to populate language select with data
populateLang: function() {
    // if dataObject from server is empty, return nothing
    if ( !typeof(dataObject) == 'object' ) return false;

    // create select options string with its current content <only first one> (the "select language.." option)
    var langs = '<option value="">'+$('#'+langSelect+' option:first').html()+'</option>';

    // loop dataObject and get it's keys as language values and title as option title
    for( i in dataObject ) {
        // combine it to existing string
        langs += '<option value="'+i+'">'+dataObject[i].title+'</option>';
    };

    // populate our select with newly received data and by using chain, bind "onChange" event to it:
    $('#'+langSelect).html(langs).change(function() {
        // if selected the empty row, die.
        if ( !$(this).val() ) return false;

        // remove high light CSS class from the active select box
        $('#'+langSelect).removeClass('highlighted');

        var val = $(this).val(); // value we got from selected option, f.e: "EN" (English EN)

        // populate status select
        dMgr.populateStatus(val); // passing the selected language

        // if we change language, make sure we empty the last select - questions
        // we pass only third argument as true which means - yes, erase the data
        dMgr.populateQuestions(false,false,true);

    }).addClass('highlighted'); // high light the active select box with CSS class
},
populateStatus: function(lang) {
    // if no language passed, die.
    if ( !lang ) return false;

    // if there's no status for select language - die.
    if ( dataObject[lang].status.length <= 0 ) return false;

    // just a shortcut to the object statuses
    var sObj = dataObject[lang].status;

    // create select options string with its current content <only first one> (the "select status.." option)
    var statuses = '<option value="">'+$('#'+statusSelect+' option:first').html()+'</option>';

    // loop through all statuses and get their titles and values for new options
    for( i in sObj ) {
        statuses += '<option value="'+i+'">'+sObj[i].title+'</option>';
    };

    // populate our select with newly received data and by using chain, bind "onChange" event to it:
    $('#'+statusSelect).html(statuses).change(function() {
        // if selected the empty row, die.
        if ( !$(this).val() ) return false;

        // remove high light CSS class from the active select box
        $('#'+statusSelect).removeClass('highlighted');

        var val = $(this).val(); // value we got from selected option, f.e: "1" (Answered)

        // populate status select
        dMgr.populateQuestions(lang, val); // passing the selected language         

    }).addClass('highlighted'); // high light the active select box with CSS class
},
populateQuestions: function(lang, status, eraseData) {
    if ( ( !lang || !status ) && !eraseData ) return false;

    // We do this actions before checking everything else, as there might be eraseData option
    // create select options string with its current content <only first one> (the "select question.." option)
    var questions = '<option value="">'+$('#'+questionSelect+' option:first').html()+'</option>';

    // If we just erasing the data, then put what we already harvested back and stop.
    if ( eraseData ) {
        $('#'+questionSelect).html(questions);
        return true;
    };

    // if there's no status for select language - die.
    if ( dataObject[lang].status[status].questions.length <= 0 ) return false;

    // shortcut to the questions
    var sObj = dataObject[lang].status[status].questions;

    // loop through all statuses and get their titles and values for new options
    for( i in sObj ) {
        for( key in sObj[i] ) {
            questions += '<option value="'+key+'">'+sObj[i][key]+'</option>';
        };
    };

    // populate our select with newly received data and by using chain, bind "onChange" event to it:
    $('#'+questionSelect).html(questions).change(function() {
        // if selected the empty row, die.
        if ( !$(this).val() ) return false;

        // remove high light CSS class from the active select box
        $('#'+questionSelect).removeClass('highlighted');

        var val = $(this).val(); // value we got from selected option, f.e: "1" (Answered)

        /*
        * Do whatever you want here. "val" in this scope is the latest value selected (question)
        * Either build more selects, or do AJAX call, or change page context.
        */
        alert('You\'ve reached the last select option and selected it, what should I do now?');

    }).addClass('highlighted'); // high light the active select box with CSS class
}
};

    Now, just navigate to your “index.html” file in your browser or use it on your local/remote web server and see the results :p

    Enjoy, Bora!

    • 0