javascript - aspの国選択からの状態ドロップダウンの入力

Question

更新が必要な古いクラシック ASP アプリケーションがあります。2 つのドロップダウンを追加する必要があり、2 番目のドロップダウンは最初のドロップダウンに基づいて入力する必要があります (例: 国と州)。JavaScriptを使用してどのようにそれを行いますか?

Answer 1

更新: 以下のあなたのコメントに基づいて、あなたが望むことを実行するコードを含めるように応答を更新しました。この要素を使用して、Ajax を使用しなくても、選択された国に基づいoptgroupてフィルター処理できます。options

最初の方法: (optgroup フィルタリング)

jsFiddle での作業例。

HTML:

<select id="C_Country" name="C_Country" aria-required="true" class="required">
    <option value="">-- Please Select --</option>
    <option value="USA">United States</option>
    <option value="CA">Canada</option>
</select>
<p>
    <label for="C_State_Prov">State or Province <span title="required">*</span>
    </label>
</p>
<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required">
    <option value="" selected="">-- Please Select --</option>
    <optgroup label="United States">
        <option value="AK">Alaska</option>
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        <option value="AZ">Arizona</option>
        <option value="CA">California</option>
    </optgroup>
    <optgroup label="Canada">
        <option value="AB">Alberta</option>
        <option value="BC">British Columbia</option>
        <option value="MB">Manitoba</option>
    </optgroup>
</select>

JavaScript:

var state_province = $('#C_State_Prov option, #C_State_Prov optgroup');

state_province.hide();

$('#C_Country').change(function () {
    state_province.hide();
    $("#C_State_Prov optgroup[label='" + $(this).find(':selected').html() + "']")
        .children()
        .andSelf()
        .show();
});

2 番目の方法: (Ajax)

jsFiddle での作業例。

これを実現する方法の大まかなアイデアを次に示します。jQuery で定義された URL は、(JavaScript で変数として定義されるのではなく) ユーザーが選択した国に基づいて、サーバー側コードが必要な HTML を生成する場所を指す必要があります。

HTML:

<form action="#">
    <div>
        <label for="country">Country:</label>
    </div>
    <div>
        <select name="country" id="country">
            <option value="">Please select</option>
            <option value="us">United States</option>
        </select>
    </div>
    <div id="stateContainer" class="hidden">
        <div>
            <label for="state">State</label>
        </div>
        <div>
            <select id="state" name="state"></select>
        </div>
    </div>
    <div>
        <input type="submit" id="submit" name="submit" value="Submit">
    </div>
</form>

CSS:

.hidden {
    display: none;
}

JavaScript:

var $country = $("#country"),
    $stateContainer = $("#stateContainer"),
    $state = $("#state"),
    url = "http://jsfiddle.net/htmled/KZ4jd/",
    html = '<option value="al">Alabama</option><option value="ar">Arkansas</option>',
    countryVal;

$country.change(function () {
    countryVal = $country.val();
    $stateContainer.show();
    $state.html(html).load(loadUrl);
});