我想设置
HTML< select>的值元素被动地,不改变元素的各种选项.我找到了一个解决方案,但它并不优雅.
要进行测试,请使用create meteor select创建一个准系统Meteor应用程序,并将select.html和select.js文件的内容更改为以下内容：
select.html
<body>
{{> select}}
</body>
<template name="select">
<label for="select">{{category}}</label>
<select id="select">
<option value='' disabled selected style='display:none;'>Select...</option>
<option value="Animal">Animal</option>
<option value="Vegetable">Vegetable</option>
<option value="Mineral">Mineral</option>
</select>
</template>
select.js
if (Meteor.isClient) {
Session.set("category","")
Session.set("label","Category")
Template.select.onRendered(function () {
setSelectValue()
})
Template.select.helpers({
category: function () {
setSelectValue()
return Session.get("label")
}
});
function setSelectValue() {
var select = $("#select")[0]
if (select) {
select.value = Session.get("category")
}
}
}
现在启动您的应用.在浏览器控制台中,您可以更改类别Session变量的值：
Session.set("category","Animal")
但是,在更改标签之前,select元素不会更新：
Session.set("label","category") // was "Category'
现在select元素更新,并且任何后续更改类别Session变量也将更新select元素.
Session.set("category","Vegetable") // Now the select element updates
解决方法
是.你可以这样做：
<select id="select">
<option value="Animal" {{animalSelected}}>Animal</option>
<option value="Vegetable" {{vegetableSelected}}>Vegetable</option>
<option value="Mineral" {{mineralSelected}}>Mineral</option>
</select>
看起来像这样的助手：
Template.select.helpers({
animalSelected: function () {
return (someCondition === true) ? 'selected' : '';
},vegetableSelected: function () {
return (someOtherCondition) ? 'selected' : '';
}
});
更好的方法可能是这样的：
<select id="select">
{{#each options}}
<option value="{{value}}" {{selected}}>{{label}}</option>
{{/each}}
</select>
然后你可以在助手中使用它来决定选择什么和不选择什么.
另一种选择是使用标准jQuery来更改选择框.像这样的东西：
$('[name=options]').val( 3 );
