在选择框中选择加载选项

时间:2013-07-08 06:17:18

标签: javascript html mysql jquery

我有一个主下拉列表,其中包含州名,当我选择每个州名时我需要在选择框中显示城市名称,但选择框名称应该相同,因为当我给出不同的选择框时名称数据不存储在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>

1 个答案:

答案 0 :(得分:0)

Demo

您可以使用prop('disabled', true / false);来管理要选择的城市。你不应该有两个具有相同名称的选择,因为你需要sql中的它们我为它做了一个修复。另请注意,您的帖子中首先会错过<select>,而“城市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');
    }

    });
});