javascript - 从asp中的国家选择中填充状态下拉列表

Question

我有一个旧的经典 asp 应用程序需要更新。我需要添加 2 个下拉列表，第二个需要根据第一个（例如国家和州）填充。你是如何使用javascript做到这一点的？

Answer 1

更新：根据您在下面的评论，我更新了我的回复以包含可以满足您需求的代码。您可以使用该optgroup元素根据选择的国家/地区进行过滤options，而无需使用 Ajax。

第一种方式：（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();
});

第二种方式：（阿贾克斯）

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