1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

PHP/Javascript/Jquery -Selecting a dropdown item should dynamically display another

Discussion in 'JavaScript and AJAX' started by dilip1030, Jul 13, 2010.

  1. dilip1030

    dilip1030 New Member

    Joined:
    Jun 14, 2010
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    I have code for autosuggestion while typing in a text box written in Javascript and PHP. When I start typing a number I get a list of matching numbers and I'm able to select one of them with the mouse click. Now I have an other text box which should display a list of numbers based on the selection from the first textbox. I have no clue on how to do this. It would be great if you provide me with the sample code for the same. Please help me out.

    Thanks
     
  2. Ami Desai

    Ami Desai Member

    Joined:
    Jan 5, 2017
    Messages:
    42
    Likes Received:
    17
    Trophy Points:
    8
    Location:
    Ahmedabad
    Home Page:
    Hi,

    You can check this
    Code:
    <script type="text/javascript">
         function configureDropDownLists(ddl1,ddl2) {
        var colours = ['Black', 'White', 'Blue'];
        var shapes = ['Square', 'Circle', 'Triangle'];
        var names = ['John', 'David', 'Sarah'];
    
        switch (ddl1.value) {
            case 'Colours':
                ddl2.options.length = 0;
                for (i = 0; i < colours.length; i++) {
                    createOption(ddl2, colours[i], colours[i]);
                }
                break;
            case 'Shapes':
                ddl2.options.length = 0;
            for (i = 0; i < shapes.length; i++) {
                createOption(ddl2, shapes[i], shapes[i]);
                }
                break;
            case 'Names':
                ddl2.options.length = 0;
                for (i = 0; i < names.length; i++) {
                    createOption(ddl2, names[i], names[i]);
                }
                break;
                default:
                    ddl2.options.length = 0;
                break;
        }
    
    }
    
        function createOption(ddl, text, value) {
            var opt = document.createElement('option');
            opt.value = value;
            opt.text = text;
            ddl.options.add(opt);
        }
    </script>
    Now call it as below :
    Code:
    <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
    <option value=""></option>
    <option value="Colours">Colours</option>
    <option value="Shapes">Shapes</option>
    <option value="Names">Names</option>
    </select>
    
    <select id="ddl2">
    </select>
    Thanks
     

Share This Page