单击按钮更改 select-元素。脚本仅适用于 Chrome

Question

我正在尝试编写一个脚本，允许单击按钮更改 select 元素中的 selected 选项。此脚本在 Chrome 中有效，但在 Firefox 中无效，这是怎么回事？

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);
});

Answer 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>

单击按钮更改 select-元素。脚本仅适用于 Chrome

Click button to change select-element. Script only works in Chrome

javascript

firefox

select

google-chrome