使用Meteor反复设置选择HTML元素的值

发布时间:2019-10-09 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了使用Meteor反复设置选择HTML元素的值脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想设置 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 );

this SO answer.

总结

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

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

快乐,其实很简单!比如有我~

关注我升职加薪

标签: