How can I show a select dropdown menu based on the first select dropdown menu

0
votes

I hope I don't bother you all with my question, because I am relatively new to jQuery and JavaScript and I don't know much about it.

I want to make a select dropdown menu. If the user has selected a value from the select dropdown menu, then there comes a new select dropdown menu based on the chosen value, like websites about car vehicles where you choose (for example), a BMW and then you get to see a new dropdown menu, where you can choose out of the models of the BMW cars.

Sorry for any grammatical mistakes. I am dutch.

I hope that you can help me with this. As i said, I am new to jQuery and JavaScript and I hope someone can explain it well.

3
javascriptjquerycssdrop-down-menumenu
This sounds like a homework problem. – gtr1971
This is not a homework problem, because i don't study any study related to computer science. I love to learn something within computer science. I already know xhtml(5) and css(3). – user3443027
The best thing you can do is have a go at it yourself then come back here and post your code and someone may be able to advise you on it. – Billy Moat
What have you tried so far? We are more than willing to guide, but give us something to go on other than a rough idea and no code. – Jason M. Batchelor
Where will you get the data for the next dropdown from? A json object? A dropdown already (hidden) on the page? – Jaap

3 Answers

0
votes

first you have a problem with your code because checkname can be undefined and he cant use test function there.

Both of your dropdowns should have an id.

I suggest you to check first if the checkname is not undefined then do the next validation

$( "#target" ).select(function() {
  // do the call to ajax and popualte the next dropdown
});

For more information you can visit http://jqapi.com/#p=select Also you can learn more about ajax here http://www.w3schools.com/ajax/default.asp

A similar post How to populate a cascading Dropdown with JQuery

Have a good day

0
votes

The code below allows user selection of a drop-down id="division" to re-populate a drop-down id="branch_no". Notice the method jQuery.getJSON - that's making an AJAX call to a PHP page that does the query and returns JSON data. 

$('#division').change(function() { 

    jQuery.getJSON( 'gAjaxJsonBranches.php?division=' + $('#division').val(), null, function(jdata) {

        var jObj = jQuery.parseJSON(jdata);

        var $el = $("#branch_no");
        $el.empty();

        $el.append($("<option></option>").attr("value", '').html('&lt;&lt;SELECT&gt;&gt;'));

        $.each(jObj.searches, function(key, value) {
            $el.append($("<option></option>").attr("value", value['id']).text(value['item']));
        });
    });


 });

Code for gAjaxJsonBranches.php, uses a database lookup: 

<?php

$conn = new PDO('mysql:host=yourhost;dbname=yourdb', 'user', 'password');

$search_list = '{ "searches": [ ';

$l_sql = "SELECT b.branch_no, b.branch_name " ;
$l_sql .= "FROM branches b INNER JOIN divisions d ON b.divisions_id = d.id " ; 
$l_sql .= "WHERE d.division = '" . $_GET["division"] . "' " ; 
$l_sql .= "ORDER BY b.divisions_id, b.branch_no ";

foreach ($conn->query($l_sql) as $l_row) {

    if(trim($l_row[1]) != '') {

        $search_list .= '{' ;
        $search_list .= '"id": "' . $l_row[0] . '",' ;
        $search_list .= '"item": "' . $l_row[0] . '-' . $l_row[1] . '"' ;
        $search_list .= '},' ;
    }

}

$search_list = substr($search_list, 0, -1);

$search_list .= '] }';

header('Content-type: text/plain');
echo json_encode($search_list);
exit();
0
votes

Here's the DEMO

Given an array of values such as: 

var mainDropdownValues = {1: "one", 
                           2: "two",
                           3: "three",
                           4: "four"};

and with a helper function such as:

var assignValuesToDropDown = function( dropdownSelector, valuesArray ){
    var seloption = '';

    $.each( valuesArray, function(index, value){            
         seloption += '<option value="'+ index +'">'+ value +'</option>';
    });

    $(dropdownSelector).append(seloption);        
};

You can do this to populate the first drop down when the page is ready:

$().ready(function(){
    assignValuesToDropDown( "#mainDropdown", mainDropdownValues );

    // add a listener for when the value change on the main dropdown, to update
    // the second one.
    $('#mainDropdown').on('change', function(){
      // need to get the second set of values from somewhere (see demo for how I did it) 
      assignValuesToDropDown( "#secondaryDropdown", dropDownValues );         });
});