Listbox from a dropdownlist

Question

Can anyone tell me how can i load a listbox from a selected item of a dropdownlist?

Let's say i have a dropdownlist that contain "option1=male" & "option2=female" I want that when male is selected, a list of male employees is shown in a listbox.

Added note: i want to know how can i do this if employees names are saved in a file / data base?

are u wishing something like this??? http://jsfiddle.net/wizam/52LyU/1/ — Green Wizard, Feb 10 '14 at 13:48
There is a similar ticket that can be seen here: http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript — gooser, Feb 10 '14 at 13:55

score 0 · Answer 1 · answered Feb 10 '14 at 13:58

I gather that you want it to populate another listbox asynchronously? What you would need to do to achieve this is to use JavaScript and to call a function when the document loads. For example

    $(document).ready(function(){
    exampleFucntion();  
    });

This will call the function "exampleFunction" when the document loads. Inside this function the following code can be put where #dropdownbox would be the ID of your HTML drop down box.

    $("#dropdownbox").change(exampleOnDropDownChanged);

This again will call a function that performs an action everytime the index of the drop down box changes. Inside the called function is where you would put the code to create another dropdown box dynamically with the details of male or female employees (or just populate an existing dropdown). Within the function you could put 'if' statements to get the male or female employees and then carry out the corresponding code to populate the dropdown. This function could also call a PHP page which could retrieve data and then populate the drop down.

The way I have described doesn't require the HTML page to be refreshed. I also suggest that you read around JavaScript and AJAX and also basic techniques, such as populating dropdown boxes.

score 0 · Answer 2 · answered Feb 10 '14 at 14:01

I think this is what you are looking for. DEMO HERE Select your gender and shows relative listbox.

<form id="survey" action="#" method="post">
    <div id="section1">
        <label for="Gender">Select employee gender.</label>
        <select id="Gender" onchange="selection(this);">
            <option value="Gender">---Select---</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>
    <div id="section2" style="display:none;">Please select employee gender from above.</div>
    <div id="section3" style="display:none;">Male Employees
        <br />
        <label for="Jim">Jim</label>
        <input type="radio" id="Jim" />
        <label for="Tom">Tom</label>
        <input type="radio" id="Tom" />
        <label for="Sam">Sam</label>
        <input type="radio" id="Sam" />
    </div>
    <div id="section4" style="display:none;">Female Employees<br />
        <label for="Kate">Kate</label>
        <input type="radio" id="Kate" />
        <label for="Claire">Claire</label>
        <input type="radio" id="Claire" />
        <label for="Sue">Sue</label>
        <input type="radio" id="Sue" />
    </div>
</form>

<script>
 var sections = {
     'Gender': 'section2',
         'Male': 'section3',
         'Female': 'section4'
 };

 var selection = function (select) {

     for (var i in sections)
     document.getElementById(sections[i]).style.display = "none";

     document.getElementById(sections[select.value]).style.display = "block";

 };
</script>

Thanks, this anwser an important part of my question, i want to know how can i do this if employees names exist in a data base? — Jihed Jaouabi, Feb 10 '14 at 14:18

score 0 · Accepted Answer · answered Feb 10 '14 at 14:10

Is this what you're after?

Selecting from a dropdown box a specific option will trigger an ajax call for a specific json file. On success, we display file's content into a listbox. This is just a demo.

Code sample:

$(document).ready(function() {
      var listbox = $('#listbox'),
          populateListbox = function(data) {
              for (var i = 0, item; i < data.length; i++) {
                item = data[i];

                var option = $('<option>').val(item.age).text(item.name);

                listbox.append(option);
              }

              showListbox();
            },
            emptyListBox = function() {
              listbox.empty();
            },
            showListbox = function() {
              listbox.removeClass('hide');
            },
            hideListbox = function() {
              listbox.addClass('hide');
            };

      $('#dropdown').on('change', function (e) {
        emptyListBox();
        hideListbox();

        var selectedOption = $("option:selected", this),
            selectedValue = this.value;

          switch (selectedValue) {
            case 'male':
                $.getJSON( "male.json", populateListbox);
              break;
            case 'female':
                $.getJSON( "female.json", populateListbox);
              break;
          }
      });
});

Added note: i want to know how can i do this if employees names are saved in a file / data base? (I'm a beginner sorry for the noob question) — Jihed Jaouabi, Feb 10 '14 at 14:29
The above example already pulls data from files: male.json and female.json. Lines doing that are: `$.getJSON( "male.json", populateListbox);` and `$.getJSON( "female.json", populateListbox);`. Just inspect the left panel [here](http://plnkr.co/edit/KVQLjrhBhw3fJU9UkW6p?p=preview) and you'll see the 2 json files. — Nicolae Olariu, Feb 10 '14 at 14:32
To get data saved in a database you may need a server side web service that will expose some endpoints. Consuming those endpoints using js (jQuery getJSON method for instance) will return you the data and then you could hook it up in the logic above. — Nicolae Olariu, Feb 10 '14 at 14:38

Listbox from a dropdownlist

3 Answers3