在选择框中选择加载选项答案

【问题标题】：On select loading options in a select box在选择框中选择加载选项
【发布时间】：2013-07-08 06:17:18
【问题描述】：

我有一个包含州名的主下拉列表，当我选择每个州名时，我需要在选择框中显示城市名称，但选择框名称应该相同，因为当我给出不同的选择框时命名数据未存储在 sql 数据库中。所以我需要在每个州选择上加载特定的城市名称。任何选项

<option value="">Select your Location</option>
            <option value="CHENNAI">CHENNAI</option>
            <option value="GURGAON">GURGAON</option>
</select>
<select name="site">
              <option value=""> Select Site </option>
              <option value="City1"> City1</option>
              <option value="City2"> City2</option>
              <option value="City3"> City3</option>
              <option value="City3"> City3</option>
            </select>
<select name="site">
              <option value=""> Select Site </option>
              <option value="City1"> City1</option>
            </select>

【问题讨论】：

你有没有尝试实现一些东西？到目前为止你做了什么？

标签： javascript html mysql jquery

【解决方案1】：

Demo

您可以使用prop('disabled', true / false); 来管理要选择的城市。您不应该有 2 个具有相同名称的选择，所以因为您需要它们在 sql 中，所以我对其进行了修复。另请注意，在您的帖子中，您首先错过了<select>，而“City 3”出现了 2 次。

html

<select name="state" id="sel_state">
    <option value="">Select your Location</option>
    <option value="CHENNAI">CHENNAI</option>
    <option value="GURGAON">GURGAON</option>
</select>
<select name="site" id="CHENNAI">
    <option value="">Select Site</option>
    <option value="City1">City1</option>
    <option value="City2">City2</option>
    <option value="City3">City3</option>
    <option value="City4">City3</option>
</select>
<select name="site" id="GURGAON">
    <option value="">Select Site</option>
    <option value="City1">City1</option>
</select>

jQuery

$(function () {

    $("#sel_state").change(function () {
        var a = $("#sel_state option:selected").text();
        if (a == 'CHENNAI') {
        $('#GURGAON').prop('disabled', true);
        $('#CHENNAI').prop('disabled', false);
        $('#GURGAON').prop('name', 'site_ignored');
        $('#CHENNAI').prop('name', 'site');
    }
    if (a == 'GURGAON') {
        $('#CHENNAI').prop('disabled', true);
        $('#GURGAON').prop('disabled', false);
        $('#GURGAON').prop('name', 'site');
        $('#CHENNAI').prop('name', 'site_ignored');
    }

    });
});

【讨论】：