jquery.chained.min.js 设置第二个值 select

Question

在我的 google chrome 扩展 options.html 中，我使用链式 select 来获取存储在 chrome.storage 中的值，效果很好.

现在，当我重新打开我的 options.html 时，我想从我的 chrome.storage 中获取值并将链接的 select 再次设置为这些值。我的代码适用于设置第一个 select，但第二个保持为空。如何将 select 都设置为 chrome.storage 值？

这是我的问题的 fiddle 示例：http://jsfiddle.net/timw1984/2hxzem1e/2/

如您所见，第一个 select 在按钮单击时发生变化，但第二个没有。

options.html:

<select id="choose-channel" name="accounts">
    <option value="MLB">MLB</option>
    <option value="NFL">NFL</option>
    <option value="2">NBA</option>
</select>
<select id="choose-channel-2" name="searches">

<option class="MLB" value="Orioles">Orioles</option>
<option class="MLB" value="RedSox">Red Sox</option>
<option class="MLB" value="Yankees">Yankees</option>
<option class="NFL" value="49ers">49ers</option>
<option class="NFL" value="Bears">Bears</option>
<option class="NFL" value="Bengals">Bengals</option>
</select>

options.js:

    var team, sport ;
$("select").addClass("ui-selectmenu-button ui-widget ui-state-default ui-corner-all");
$("#choose-channel-2").chained("#choose-channel");

chrome.storage.sync.get({
        sport1:"MLB",
        favoriteTeam: 'RedSox'
    }, function(items) {
        document.getElementById('choose-channel').value = items.sport1;
        document.getElementById('choose-channel-2').value = items.favoriteTeam;

    });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

谢谢！

蒂姆

Answer 1

仅通过 .val()/.value 设置值通常不会触发与输入元素交互所触发的相同类型的处理。

您应该触发一个指示值已更改的事件：

$('#choose-channel').val(items.sport1).change(); // or .trigger("change")
$('#choose-channel-2').val(items.favoriteTeam).change();

Your JSFiddle, patched.

jquery.chained.min.js 设置第二个值 select

jquery.chained.min.js set value of 2nd select

javascript

jquery

chained

google-chrome-extension