使用Meteor反复设置选择HTML元素的值_html-js-css

概述我想设置 HTML< select>的值元素被动地,不改变元素的各种选项.我找到了一个解决方案,但它并不优雅. 要进行测试,请使用create meteor select创建一个准系统Meteor应用程序,并将select.html和select.js文件的内容更改为以下内容： select.html <body> {{> select}}</body><template name="s 我想设置 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}}>{

}</option> {{/each}} </select>

然后你可以在助手中使用它来决定选择

什么和不选择什么.

另一种选择是使用标准jquery来更改选择框.像这样的东西：

$('[name=options]').val( 3 );

或this SO answer.

总结

以上是内存溢出为你收集整理的使用Meteor反复设置选择HTML元素的值全部内容，希望文章能够帮你解决使用Meteor反复设置选择HTML元素的值所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1117516.html