2016-12-12 10 views
0

dropdown1から選択された値が変更されるとすぐに、dropdown1の選択値に対応するデータを設定する必要があります。データが入力された場合は、dropdown2に追加する必要があります。ドロップダウン時にAjax配列が選択されない

これに関する質問と回答を確認したところ、ほとんどすべての解決策が試されましたが、まだそれを動作させることはできません。

HTML

<body> 
<select id="dropdown1" class='form-control-static'> 
    <option value="value1">Value 1</option> 
    <option value="value2">Value 2</option> 
</select> 

<select id="dropdown2" class='form-control-static'> 
</select> 

<script src="js/jquery.js"></script> 
<script src="js/externalJavascript.js"></script> 
</body> 

externalJavascript

$('select[name=dropdown1]').change(function (e) { 
     var selected = $('select[name=dropdown1]').val() 
     alert(selected); 

     $.ajax({ 
      type: 'POST', 
      data: { name: selected }, 
      url: 'dbaccess.php', 
      datatype: 'json', 
      success: function(data) { 
       alert(data); 
       var $select = $('#dropdown2'); 
       $.each(data, function(key, value) { 
        $select.append('<option value=' + key + '>' + value.name + '</option>'); 
       }); 
      } 
     }); 
    }); 

dbaccess.php

<?php 
$name = $_POST['name']; 
$name_id = getIdByName($name); 

$names_arr = array(); 
$names_arr = getNamesByNameId($name_id); 
//var_dump($names_arr); 
echo json_encode($names_arr); 
?> 

メッセージ警告ボックスに戻り、正しいデータをSQLエディタに示すよう alert(data)ショーは

[{"name":"My Name 1"},{"name":"My Name 2"},{"name":"My Name 3"}] 

として、データベースからデータを返された。しかし、それだけでdropdown2に追加しません、私は何をすべきかに関係なく選択します。 ajaxに問題はありません。

ご意見やご提案はありますか?私は助けや提案を感謝します。

ありがとうございます。

+0

コンソールにエラーはありますか?コードがselect要素を見つけますか?コードはループに入りますか? console.log()はあなたの友人です。そして、すべてのインデックスに「名前」があるわけではありませんか? – epascarello

答えて

1

あなたのコード全体は、1行が欠けているだけで完璧です。

JSON.parseをajax成功呼び出しに追加するだけです。

success: function(data) { 
       data = JSON.parse(data); 
       ......... 
      } 
+0

あなたは天才です。私はさまざまなソリューションとサンプルをオンラインで試しましたが、どれも私の問題を解決しませんでした。あなたの答えは私の問題を解決しました。ありがとう。 – p3ace

関連する問題