jquery.chained.min.js 设置第二个选择的值答案

【问题标题】：jquery.chained.min.js set value of 2nd selectjquery.chained.min.js 设置第二个选择的值
【发布时间】：2016-05-29 09:24:26
【问题描述】：

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

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

这是我的问题的一个小提琴示例：http://jsfiddle.net/timw1984/2hxzem1e/2/

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

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

谢谢！

提姆

【问题讨论】：

据我们所知，这可能是您的 HTML 代码中的拼写错误。请将其缩减为 minimal example，包括 HTML。
Xan，这是我的错，第一次发海报。我将其修剪为唯一相关的代码并添加了 html 部分。

标签： javascript jquery google-chrome-extension chained

【解决方案1】：

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

您应该触发一个表明值已更改的事件：

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

Your JSFiddle, patched.

【讨论】：

谢谢 Xan，这正是我想要的！