触发淘汰赛事件从外部

Question

我有以下选择-元素在HTML形式：

<select multiple="multiple" data-bind="options: candidateList, optionsValue: 'id', optionsText: 'title', optionsAfterRender: setOptionTitle, selectedOptions: selectedCandidates, optionsAfterRender: setOptionTitle, event: { dblclick: addSelectedCandidate, change: candidateChanged }, enable: enabled()"> 
<option title="first" value="1">first</option> 
<option title="second" value="2">second</option> 
<option title="third" value="3">third</option> 
</select> 

现在我选择选择使用jQuery的方法设置“选择的选项”中的多个元素 - 值。如你所见，那个select有一个数据绑定，它来自knockout。该淘汰赛代码位于另一个由其他人提供的JavaScript文件中。我们无法真正改变那里的内容。我们的代码不是基因敲除，而是简单的jQuery代码。

现在我的问题是，该选择有验证。当我点击一个元素手动，这使另一个按钮等

但是，当我尝试通过代码做到这一点，没有任何反应。我尝试插入“selected”，$(option).trigger('click'),$(option).click(),$(option).trigger('change')和$(option).change();

有没有什么办法强制淘汰赛“认识”我们以编程方式改变的东西？

Answer 1

使用val然后trigger('change')它会工作。这里有一个演示：

ko.applyBindings({ 
 
    candidateList: [{ id: 1, title: "first" }, { id: 2, title: "second" }, { id: 3, title: "third" }], 
 
    setOptionTitle: function() { }, 
 
    selectedCandidates: ko.observableArray(), 
 
    addSelectedCandidate: function() { }, 
 
    candidateChanged: function() { }, 
 
    enabled: ko.observable(true) 
 
}); 
 

 
function getRandomVal() { return (Math.floor(Math.random() * (3 - 1)) + 1).toString(); } 
 

 
window.setInterval(function() { 
 
    var vals = []; 
 
    if (Math.random() > 0.75) { vals.push(getRandomVal()); } 
 
    if (Math.random() > 0.75) { vals.push(getRandomVal()); } 
 
    if (Math.random() > 0.75) { vals.push(getRandomVal()); } 
 
    $("select").val(vals).trigger("change"); 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<select multiple="multiple" data-bind="options: candidateList, optionsValue: 'id', optionsText: 'title', optionsAfterRender: setOptionTitle, selectedOptions: selectedCandidates, optionsAfterRender: setOptionTitle, event: { dblclick: addSelectedCandidate, change: candidateChanged }, enable: enabled()"> 
 
<option title="first" value="1">first</option> 
 
<option title="second" value="2">second</option> 
 
<option title="third" value="3">third</option> 
 
</select> 
 

 
<hr> 
 
Selected candidates: <code data-bind="text: ko.toJSON($root.selectedCandidates, null, 2)"></code>

PS。如果您无法更改代码，那么您的更改可能实际上应该是应该。像这样混合使用jQuery和KO会在短期内伤害到你，从长远来看，它会严重损害你严重。

PPS。在发布的KO代码中有一些奇怪的东西（至少没有上下文）。首先，它有option s，但这些应该是生成的。其次，听取change事件，但通常订阅或可写入计算结果将是更好的选择。第三，optionsAfterRender被宣布两次。最后，执行enabled值，如果它是可观察的，则这是多余的。