Question

我有小问题。我需要从<select> A中选择一个选项，该选项会触发操作并从<option> B中选择他的第一个<select>来自A中所选<option>的值。一切正常，但我不能只选择最后一个optgroup和他的选项。

尝试查看jsfiddle

此错误似乎仅适用于Firefox（Linux，Win7）。谷歌浏览器还可以。有什么想法吗？

代码（html）：

<select id="charset" name="charset">
    <option value=""></option>
    <option value="armscii8">ARMSCII-8 Armenian</option>
    <option value="ascii">US ASCII</option>
    <option selected="selected" value="utf8">UTF-8 Unicode</option>
</select>

<select id="collation" name="collation">
    <optgroup label="armscii8">
        <option value="armscii8_bin">armscii8_bin</option>
        <option value="armscii8_general_ci">armscii8_general_ci</option>
    </optgroup>
    <optgroup label="ascii">
        <option value="ascii_bin">ascii_bin</option>
        <option value="ascii_general_ci">ascii_general_ci</option>
    </optgroup>
    <optgroup label="utf8">
        <option value="utf8_bin" selected="selected">utf8_bin</option>
        <option value="utf8_czech_ci">utf8_czech_ci</option>
        <option value="utf8_danish_ci">utf8_danish_ci</option>
        <option value="utf8_esperanto_ci">utf8_esperanto_ci</option>
    </optgroup>
</select>`

代码js：

(function($){

function setCollation(charset) {
    $('#collation optgroup option').removeAttr('selected');
    $('#collation optgroup').hide(0);

    if (charset && charset != '') {
        $("#collation optgroup[label='" + charset + "']").show(0);
        $("#collation optgroup[label='" + charset + "'] option:first").attr('selected', 'selected');
    }
}

$('#charset').change(function() {
    setCollation($(this).val());
});
setCollation($('#charset').val());

})(jQuery);

更新

我更新了jsfiddle，删除了显示/隐藏功能。

我将尝试重现脚本的工作原理：

当我从第一个选择框（fe。值DOS Russin）中选择排序时，会根据需要选择第二个选择。
我将第一个选择值更改为另一个。在这一刻，一切都好。
！我改回了DOS俄语，此时第二步没有选择第二个选择框。

这是一种非常奇怪的行为，我无法在FF中工作。

Answer 1

我无法解释为什么浏览器行为不一致但我可以告诉你，改为.prop似乎解决了这个问题。

 $('#collation optgroup').prop('disabled', true);
    $('#collation option').removeAttr('selected');

    if (charset && charset != '') {
        $("#collation optgroup[label='" + charset + "']").prop('disabled',false);
        $("#collation optgroup[label='" + charset + "'] > option:eq(0)").prop('selected', true);

看到它的实际效果：

http://jsfiddle.net/8pAAp/1/

jQuery - 无法在最后一个optgroup上选择第一个选项

1 个答案: