JQuery State & City Select списки не работают должным образом в Firefox, всегда передается первое значение последнего набора списка выбора

Question

Я не могу найти решение этой проблемы. У меня есть список выбора штатов, в котором при выборе штата отображается другой список городов, соответствующий выбранному штату. Затем пользователь выбирает город, отправляет форму, и значение выбранного города передается методом POST.

Если пользователь решает изменить состояние после того, как уже выбрал его, необходимо отменить выбор ранее выбранного города, чтобы можно было выбрать новый город и передать только его значение.

Работает так, как задумано в Chrome и Safari, но не в IE и Firefox. Похоже, что IE и FF передают значение первого элемента option последнего отображаемого списка.

Любые решения или обходные пути для этой проблемы будут с благодарностью, так как я ничего не понимаю по этому вопросу.

Вот что у меня так далеко ...

Демо: 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 заботится, если вы их спрятали