AJAXレスポンスに基づくドロップダウン値の変更

Question

私はAJAXに堪能ではありませんが、これはすべてのアカウントで有効であると思います。 これは、ユーザーがドロップダウンから名前を選択し、別のドロップダウン（PHPでmysqlデータベースから入力）が自動的に関連オブジェクトを選択することです。それでは、あなたが持っていたとしましょう：

名：スージー/マイケル/カレン

好きな果物：リンゴ/オレンジ/マンゴー/グアバ

スージーを選択することで、それが彼女のお気に入りであることから、それは「オレンジ」を自動選択でしょうデータベースのフルーツ。

私はAjaxがドロップダウンを関連する「果物」に変更するためのコードを持っています。

<script type="text/javascript"> 
function getAff(str) 
{ 
if (str=="NULL" || str=="") 
    { 
    document.getElementById("fruit").value=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    alert(xmlhttp.responseText); 

var indexVal = document.getElementById("fruit").length; 
    for(x=0; x<indexVal;x++) { 
    if (document.getElementById("fruit").options[x].value == xmlhttp.responseText) { 
    document.getElementById("fruit").selectedIndex = x; 
    //alert(xmlhttp.responseText); 
    } 
    } 
    } 
    } 
xmlhttp.open("GET","getaff.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 

私はここでそれをコメントしましたが、正しい値を引き出していることを警告で確認しました。

1つは、ドロップダウンボックスが変更されていないことです。私はそれがPHPを介して生成されているので、私は知らないのですか？しかし、そうすべきではありません。各ドロップダウン選択の値は、データベースから取得されるフルーツの名前です。私は自分自身にインデックス値の量を警告して、それがドロップダウンを読んでいるかどうかを確認し、正しい数値を得ています。しかし、ドロップダウンの変更はありません。何かご意見は？ありがとうございました！

Answer 1

>を選択する代わりに<の、<オプション>タグに選択された値を設定してみてください、と応答から空白をトリミング：

if (document.getElementById("fruit").options[x].value == xmlhttp.responseText.trim()) { 
    document.getElementById("fruit").options[x].selected = "selected"; 
} 

Answer 2

しようとするいくつかのこと：

• あなたが値を比較し、またはinnerHTMLていますか？

• 値（またはinnerHTML）があなたの回答と一致していることは間違いありませんか？

Answer 3

私はAJAXと非常に熟練していませんよしかし、 すべてのアカウントで私はこれが であるべきだと思います。

あなたがjavascriptに精通していないなら、私はあなたが平易なjavascriptを書くべきではないと思います（難しいです）。例えばjqueryのようなフレームワークを使用してください。このフレームワークは非常に普及しており、これらの日常的な作業を簡単に円滑にします。行うことになっているもの

は、ユーザー ドロップダウンから名前を選択し、 （PHPと MySQLデータベースから移入）別のドロップダウンが自動的に は、関連するオブジェクトを選択します。

あなたは、次のセクションを見てください。

• How Jquery works：あなたが始めるために。
• s elect()：イベントハンドラを「select」JavaScriptイベントにバインドするか、またはそのイベントを要素でトリガします。

• .load：：サーバーからデータを読み込み、返されたHTMLを一致する要素に配置します。

• /jQuery.getJSON()：HTTP GETリクエストを使用してサーバーからデータをロードする/ GET HTTPリクエストを使用してサーバーからJSONエンコードされたデータをロードする。

• Jquery.post：HTTP POST要求を使用してサーバーからデータをロードします。

これらのセクションを読んだりスキミングしたりすると、何の努力もなく、それを書くことができるはずです（さらに、信じられないJohn Resigに感謝します）。