Question

我似乎无法找到解决此问题的方法。我有一个状态选择列表，当选择状态时，会显示另一个与所选状态对应的城市列表。然后，用户选择一个城市，提交表单，并通过POST方法传递所选城市的值。

如果用户决定在选择之后更改状态，则应取消先前选择的城市，以便可以挑选新城市，并且只有在提交时才传递该值。

这适用于Chrome和Safari，但不适用于IE和Firefox。似乎IE和FF正在传递显示的最后一个列表的第一个选项元素的值。

对此问题的任何解决方案或解决方法都会非常感激，因为我无处可去。

这是我到目前为止所得到的......

演示： http://www.chrischoma.com/scripts-samples/state-city-select.php

HTML（HTML5）

<form id="state-city-select-form" method="post" action="/">

<div id="submit">
    <input id="submit-form" type="submit" value="Next &gt;&gt;" />
</div>

<div class="state">
    <div class="label">
        Select Your State:
    </div>
    <div class="input">
        <select id="state-select" name="state">
            <option value="">- Please Select Your State -</option>
            <option value="CA">California</option>
            <option value="KY">Kentucky</option>
            <option value="WA">Washington</option>
        </select>
    </div>
</div>

<div id="CA" class="city" style="display:none">
    <div class="label">
        Select Your City:
    </div>
    <div class="input">
        <select class="city-select" name="city">
            <optgroup label="- Please Select Your City -">
                <option value="Los Angeles">Los Angeles</option>
                <option value="San Francisco">San Francisco</option>
            </optgroup>
        </select>
    </div>
</div>

<div id="KY" class="city" style="display:none">
    <div class="label">
        Select Your City:
    </div>
    <div class="input">
        <select class="city-select" name="city">
            <optgroup label="- Please Select Your City -">
                <option value="Louisville">Louisville</option>
                <option value="Bowling Green">Bowling Green</option>
            </optgroup>
        </select>
    </div>
</div>

<div id="WA" class="city" style="display:none">
    <div class="label">
        Select Your City:
    </div>
    <div class="input">
        <select class="city-select" name="city">
            <optgroup label="- Please Select Your City -">
                <option value="Seattle">Seattle</option>
                <option value="Tacoma">Tacoma</option>
            </optgroup>
        </select>
    </div>
</div>

Jquery（使用版本1.7.1）

$(function() {
    $('#state-select').change(function(){
        $('.city').hide();
        $(".city-select option").removeAttr("selected");
        $('#' + $(this).val()).show();
    });
});

Answer 1

使用OPTGROUP标记不是允许单个选项组的未选择状态的好方法。它真的设计用于将选项分类到集合中。相反，如果您不想默认使用第一个选项，则需要一个空值选项。您应该将您的optgroup更改为一个选项，就像您在状态选择框中一样：

<option value="">- Please Select Your City -</option>

然后在你的jQuery中，替换它：

$(".city-select option").removeAttr("selected");

用这个：

$(".city-select").val("");

Answer 2

在$('#' + $(this).val()).show();之后添加以下内容，再添加两行

 $(".city-select").each(function(){$(this).attr("name","");});
 $("#"+$(this).val()+" .input .city-select").attr("name", "city");

这是有效的，因为你有更多具有相同名称的元素，我不认为firefox是否关心你是否隐藏了它们

Jquery State＆amp;城市选择列表在Firefox中无法正常工作，始终传递最后选择列表集的第一个值

2 个答案: