国と州の選択フィールドを段階的に強化するにはどうすればよいですか？

Question

私は2つの選択フィールド、国と状態、その後、私は同じようにコーディングしている場合、私は...任意のWebサイトが適切にこれを行う

を見ていない：

<select name="country"> 
    <option>USA</option> 
    <option>France</option> 
</select> 

<select name="state"> 
    <option></option> 
</select> 

を私はその国の選択に応じて、AJAXを使用して州のフィールドに値を入力します。

ただし、これは徐々に強調された状態です。 Javascriptを使わないとどうしたらいいですか？前の例が最良の方法ではない場合、どのように強化すべきでしょうか？

Answer 1

私のお勧めは、国の隣または下に送信ボタンをドロップすることです。送信されると、サーバーは選択された国の状態を入力し、応答を返します。

ここでJavaScriptを使用して、このボタンを非表示にして、変更ハンドラの国のドロップダウンにアタッチし、状態を返すAJAX呼び出しを行います。

したがって、JavaScriptが無効になっている場合、ボタンは状態の取得を実行します。有効な場合、AJAX呼び出しは同じことを行います。

Answer 2

2つの選択を一緒に結合することが1つの解決策である可能性があります。もちろん

<select name="countryAndState"> 
    <option>USA - Alabama</option> 
    <option>USA - Alaska</option> 
    ... 
    <option>France - Alsace</option> 
    <option>France - Aquitaine</option> 
</select> 

またはより良い

<select name="countryAndState"> 
    <optgroup label="USA"> 
     <option>Alabama</option> 
     ... 
    </optgroup> 
    <optgroup label="France"> 
     <option>Alsace</option> 
     ... 
    </optgroup> 
</select> 

と同様に、少なくとも第二の形式で、あなたはオプションvalue sが一意であることを確認する必要があります。 optgroup elementは、selectオプションをツリーの順序で階層化することをお勧めします。つまり、あなたのエンハンスのjavascriptは、DOMからツリー構造を抽出することもできます。

もう1つの解決策は、状態フィールドサーバーの側に移入することです。つまり、最初に国を選択して状態を2つのステップに分割します。選択した国を保存するためにクッキーなどで行うことができます。 countryの提出された値が保存された値と異なる場合は、新しい（選択されていない）状態select要素を出力する必要があります。