2017-02-07 21 views
0

最初のドロップダウンから与えられた選択に基づいて、2番目の選択ドロップダウンを動的にロードしようとしています。私はここに与えられた例を試しましたが、自分でそれを働かせるようには見えません。アラート入力値が変更されたが、入力値が変更された2メッセージは表示されません。元の例:PHP MYSQL dynamic select boxPHP Javascript動的選択ボックス

<!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> 
+0

関数内の '$(this)'は何ですか?あなたはそれを確認しましたか? –

+0

わかりません。元の例はjsfiddle http://jsfiddle.net/g3Yqq/2/ – kc3ase

+0

に表示されています。開発者コンソールのエラーはありますか? –

答えて

1

このスクリプトは正しいようです。 jQueryライブラリを追加するのを忘れました。

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