我一直在尝试根据在另一个 Select2 上选择的选项动态禁用动态生成的 jQuery Select2 中的几个选项。我已经尝试了一些建议,但没有成功。
这个( how to let jquery select2 disable one option dynamically? )是最接近的,但同样,就我而言,我还没有 <select>
带有已写入的选项,但是即时生成的。
选项的值和文本是从表中提取的,并且会随着时间而变化,因此更喜欢实现当前的方式(而不是上面的链接中的方式)。如果这根本不可能,那么也许 {{templating}}
也许是最后的手段。下面的示例代码,我还在此处放置了一个演示:http://jsfiddle.net/s_j_l/gqbzh5y0/23/
HTML:
User Roles:
<div id="userr"></div>
Quarters:
<div id="qtr"></div>
JS:
$("#userr").select2({
data: _.map(userroles, function (json) {
return {
id: json.roleid,
text: json.role
}
}),
placeholder: 'Select User Role',
allowClear: true,
containerCssClass: 'select-block-level'
}).on('change', function (e) {
if (e.val == 'user') $("#qtr").find('option[value="2013Q4"]').attr('disabled', 'disabled');
});
$("#qtr").select2({
data: _.map(quarters, function (json) {
return {
id: json.qid,
text: json.quarter
}
}),
placeholder: 'Select Quarters',
allowClear: true,
containerCssClass: 'select-block-level'
}).on('change', function (e) {});
});
数据:
{"userroles":[{"roleid":"admin","role":"Admin"},{"roleid":"user","role":"User"},{"roleid":"audit","role":"Audit"},{"roleid":"client","role":"Client"}],"quarters":[{"qid":"2014Q3","quarter":"2014 Q3"},{"qid":"2014Q2","quarter":"2014 Q2"},{"qid":"2014Q1","quarter":"2014 Q1"},{"qid":"2013Q4","quarter":"2013 Q4"},{"qid":"2013Q3","quarter":"2013 Q3"},{"qid":"2013Q2","quarter":"2013 Q2"},{"qid":"2013Q1","quarter":"2013 Q1"},{"qid":"2012Q4","quarter":"2012 Q4"},{"qid":"2012Q3","quarter":"2012 Q3"},{"qid":"2012Q2","quarter":"2012 Q2"},{"qid":"2012Q1","quarter":"2012 Q1"}]}
最佳答案
好吧,我已经尝试过编写工作代码但失败了。
理论是,符合:
if (e.val == 'user') $("#qtr").find('option[value="2013Q4"]').attr('disabled', 'disabled');
您可以不复制此数组,而是将其放入对象中,然后删除具有所需值的值。然后,完成后将其转回 json。
关于javascript - 根据事件动态禁用动态生成的 jQuery select2 中的几个选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25698387/