選択タグ内のデータベースからJavaScriptへの値のロード

Question

JavaScriptを初めて使用しています。私の問題は、私は3選択htmlタグがあります。 1つは国のため、もう1つは国のためのものです。私は国、州、都市のような異なるテーブルを持っています。問題は、特定の国をクリックすると対応する状態がjavaスクリプトでonchangeイベントを使用してロードされることです。ロード後、状態をクリックして対応する都市をロードする必要があります。

しかし、私はコーディングを知らない。誰かがそれを持っていれば私を送ってください。緊急です。私の上司は私の結果を待っています。

Answer 1

あなたはAJAXを調べる必要があります。達成しようとしていることは非常に一般的です。あなたがcascading dropdownsの簡単なGoogle検索を行うと、例のヒープがあります。

あなたはAJAXを扱うことになるので、ブラウザの互換性のためのビルドは時間のかかる作業であるため、jQueryなどのライブラリを使い始めることをおすすめします。

$('#my-select').change(function() { 
    // code that will be evaluated when #my-select changes 
}); 

そこから、あなたがそうのようなおおよそAJAX要求を開始します：上記のコールバックで

var country = $('#my-select').val(); 
$.post('/get-states', { country: country }, function(res) { 
    // code that will be evaluated when the ajax request completes 
}); 

では、次のような基本的な構造を必要とする、あなたが始めるために子のドロップダウンに値を設定します。

Answer 2

私が正しく理解していれば、あなたがしたいことはAJAXです。

onchangeイベントが発生すると、javascriptコードはリクエストを処理するサーバーのPHP（または他のサーバースクリプト）にリクエストを送信し、データを処理してユーザーに出力するjavascriptにデータを返します。

私は自分の頭の上から自分自身を知らないのですが、Jqueryとそのプラグインを見ることをお勧めします。あなたが望むコードを見つけたら、すぐにプロセス全体を素早くアセンブルします。

EDIT：と私はちょうどあなたの他の答えへの答えのおかげで見つかった：Cascade Dropdown List using jQuery/PHP

Answer 3

JS：

var states = new Array(); 

states['Canada'] = new Array('Alberta','British Columbia','Ontario'); 
states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco'); 
states['United States'] = new Array('California','Florida','New York'); 


// City lists 
var cities = new Array(); 

cities['Canada'] = new Array(); 
cities['Canada']['Alberta']   = new Array('Edmonton','Calgary'); 
cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver'); 
cities['Canada']['Ontario']   = new Array('Toronto','Hamilton'); 

cities['Mexico'] = new Array(); 
cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali'); 
cities['Mexico']['Chihuahua']  = new Array('Ciudad Juárez','Chihuahua'); 
cities['Mexico']['Jalisco']   = new Array('Guadalajara','Chapala'); 

cities['United States'] = new Array(); 
cities['United States']['California'] = new Array('Los Angeles','San Francisco'); 
cities['United States']['Florida'] = new Array('Miami','Orlando'); 
cities['United States']['New York'] = new Array('Buffalo','new York'); 


function setStates() { 
    cntrySel = document.getElementById('country'); 
    stateList = states[cntrySel.value]; 
    changeSelect('state', stateList, stateList); 
    setCities(); 
} 

function setCities() { 
    cntrySel = document.getElementById('country'); 
    stateSel = document.getElementById('state'); 
    cityList = cities[cntrySel.value][stateSel.value]; 
    changeSelect('city', cityList, cityList); 
} 

function changeSelect(fieldID, newOptions, newValues) { 
    selectField = document.getElementById(fieldID); 
    selectField.options.length = 0; 
    for (i=0; i<newOptions.length; i++) { 
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]); 
    } 
} 

// Multiple onload function created by: Simon Willison 
// http://simonwillison.net/2004/May/26/addLoadEvent/ 
function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
    window.onload = func; 
    } else { 
    window.onload = function() { 
     if (oldonload) { 
     oldonload(); 
     } 
     func(); 
    } 
    } 
} 

addLoadEvent(function() { 
    setStates(); 
}); 

HTML：

を

<fieldset style="width: 230px;"> 
<legend><strong>Make your selection</strong></legend> 
<p> 
<form name="test" method="POST" action="processingpage.php"> 
<table> 
<tr> 
<td style="text-align: left;">Country:</td> 
<td style="text-align: left;"> 
<select name="country" id="country" onchange="setStates();"> 
    <option value="Canada">Canada</option> 
    <option value="Mexico">Mexico</option> 
    <option value="United States">United States</option> 
</select> 
</td> 
</tr><tr> 
<td style="text-align: left;">State:</td> 
<td style="text-align: left;"> 
<select name="state" id="state" onchange="setCities();"> 
    <option value="">Please select a Country</option> 
</select> 
</td> 
</tr><tr> 
<td style="text-align: left;">City:</td> 
<td style="text-align: left;"> 
<select name="city" id="city"> 
    <option value="">Please select a Country</option> 
</select> 
</td> 
</tr> 
</table> 
</form> 
</fieldset> 

Googleに5秒かかって貼り付けました。 Plzは投稿する前にいくつかの調査を行います。

オリジナルソース：http://www.javascriptsource.com/forms/country-state-city-drop-down-list.html

Answer 4

あなただけのインターネットを検索した場合、あなたはあなたが使用してサーバー側の技術に応じて選択することができ、そこからソリューションの多くを得るでしょう。ここでhttp://beyondrelational.com/modules/2/blogs/80/posts/10655/cascading-drop-down-examplecountry-state-and-city-in-jquery.aspx

StackOverflowのは、あなたが他の人から行われた仕事を得ることができるサイトではありませんASP.NetとjQuery

を使用して1です。あなたはここにあなたの質問を投稿すれば、答えが得られずに立ち往生したときだけ、時間と努力を払う必要があります。私はこの理由のためにあなたの質問をダウンマーキングしています。