PHP Javascript dynamic select box

Question

I'm trying to load dynamically a second select drop down based on the selection given from the first drop down. I tried from an example given here but can't seem to get it working on my own. The alert input value has changed shows but the input value has changed 2 message does not appear. Original example here: PHP MYSQL dynamic select box

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <select id="select1" onchange="createSelect2()">
       <option value="">Select sth</option>
       <option value="1">1st option</option>
       <option value="2">2nd option</option>
       <option value="3">3rd option</option>
    </select>
    <select id="select2" onchange="selectSelect2">
      <option value="">Select from select1 first</option>
    </select>
    <script>
    $('#select1').change(createSelect2);
    $('#select2').change(selectSelect2);
    function createSelect2(){
        alert("The input value has changed.") ;
    var option = $(this).find(':selected').val(),
        dataString = "option="+option;
        if(option != '')
        {
         alert("The input value has changed 2. The new value is: " + option);
        $.ajax({
            type     : 'GET',
            url      : 'http://www.mitilini-trans.gr/demo/test.php',
            data     : dataString,
            dataType : 'JSON',
            cache: false,
            success  : function(data) {          
                var output = '<option value="">Select Sth</option>';            
                $.each(data.data, function(i,s){
                    var newOption = s;

                    output += '<option value="' + newOption + '">' + newOption + '</option>';
                });            
                $('#select2').empty().append(output);
            },
            error: function(){
                console.log("Ajax failed");
            }
        }); 
    }
    else
    {
        console.log("You have to select at least sth");
    }
   }
   function selectSelect2(){
    var option = $(this).find(':selected').val();
    if(option != '')
    {
        alert("You selected: "+option);
    }
    else
    {
        alert("You have to select at least sth");
    }
   }
    </script>
    </body>
    </html>

I'm not sure. The original example is shown here in jsfiddle jsfiddle.net/g3Yqq/2 — kc3ase
– kc3ase, Commented Feb 7, 2017 at 8:24

Davide Naselli · Accepted Answer · 2017-02-07 09:30:26Z

1

The script seems correct. You just forgot to add the jQuery library.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta charset="utf-8">
<head>

answered Feb 7, 2017 at 9:30

Davide Naselli

113 bronze badges

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

Collectives™ on Stack Overflow

PHP Javascript dynamic select box

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related