Question

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

Answer 1

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

第一种方式:(选择组过滤）

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

填写asp中国家选择的州下拉列表

1 个答案: