javascript - 从 ASP 中的国家/地区选择中填充州/省/自治区/直辖市下拉列表

Question

我有一个旧的经典 asp 应用程序需要更新。我需要添加 2 个下拉菜单，第二个下拉菜单需要根据第一个下拉菜单(例如国家和州)进行填充。你如何使用 JavaScript 做到这一点？

Answer 1

更新:根据您下面的评论，我更新了我的回复，以包含可以执行您想要的操作的代码。您可以使用 optgroup 元素根据选择的国家/地区过滤options，而无需使用 Ajax。

第一种方式:(optgroup过滤)

Working example on 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();
});

第二种方式:(Ajax)

Working example on jsFiddle .

以下是如何实现此目的的粗略想法。 jQuery 中定义的 URL 应指向服务器端代码将根据用户选择的国家/地区生成所需 HTML 的位置(而不是在 JavaScript 中定义为变量)。

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);
});