單擊按鈕以更改select-element。 腳本僅適用於Chrome

Question

我正在嘗試編寫一個腳本，允許按鈕單擊以更改select元素中的選定選項。 這個腳本在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);
});

Answer 1

您不應使用.attr('selected')來更改菜單的值。 只需使用$('.select-box').val('new-value')直接設置菜單$('.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>