单击按钮更改选择元素。脚本仅适用于 Chrome答案

【问题标题】：Click button to change select-element. Script only works in Chrome单击按钮更改选择元素。脚本仅适用于 Chrome
【发布时间】：2015-02-20 21:07:32
【问题描述】：

我正在尝试编写一个脚本，允许单击按钮更改选择元素中的选定选项。这个脚本在 Chrome 中可以运行，但在 Firefox 中却不行，这是怎么回事？

http://jsfiddle.net/orjan/hsvp7pt8/

var searchOption = $('.container .select-box option:selected').text();
var searchValue = $('.container .select-box option:selected').val();

$('.container').each(function () {
    $(this).children('.select-box').attr('value', searchValue);
    if ($(this).find('.select-box option:selected').val() == 'articles') {
        $(this).toggleClass('active');
    }
});
$('.container .select-label').click(function () {
    $(this).parent().toggleClass('active');

    if ($(this).siblings('.select-box').children('option:selected').val() == 'option-a') {
        $(this).siblings('.select-box').children('option:selected').removeAttr('selected');
        $(this).siblings('.select-box').children('option[value="option-b"]').attr('selected', 'selected');
        var searchValue = $('.container .select-box option:selected').val();
    } else {
        $(this).siblings('.select-box').children('option:selected').removeAttr('selected');
        $(this).siblings('.select-box').children('option[value="option-a"]').attr('selected', 'selected');
        var searchValue = $('.container .select-box option:selected').val();
    }
    $(this).siblings('.select-box').attr('value', searchValue);
});

【问题讨论】：

只是一点点，但你的 if-else 会在每个条件下重复第一个和最后一个动作。您可以将它们从 if-else 中提取出来以帮助您进行调试。

标签： javascript google-chrome firefox select

【解决方案1】：

您不应该使用.attr('selected') 来更改菜单的值。直接用$('.select-box').val('new-value')设置菜单的值就好了。

var searchOption = $('.container .select-box option:selected').text();
var searchValue = $('.container .select-box').val();

$('.container').each(function () {
    $(this).children('.select-box').attr('value', searchValue);
    if ($(this).find('.select-box option:selected').val() == 'articles') {
        $(this).toggleClass('active');
    }
});
$('.container .select-label').click(function () {
    $(this).parent().toggleClass('active');
    var select = $(this).siblings('.select-box');
    if (select.val() == 'option-a') {
        select.val('option-b');
    } else {
        select.val('option-a');
    }
});

.active {
    background-color: red;
}
.container {
    padding: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <button class="select-label">Change</button>
    <select class="select-box">
        <option value="option-a" selected="selected">Example A</option>
        <option value="option-b">Example B</option>
    </select>
</div>

【讨论】：

好的，记下了。你的代码也更苗条了。谢谢