基于模板值在选择列表中设置选择项(Set the selected item in a select

2019-06-27 09:03发布

你怎么能正确地预填充从模板的当前值选择控制?

我有一个简单的表格,编辑记录,其中示出的形式,当用于所选择的记录的值是预填充。 有点像这样:

<input type="text" id="project_name_edit" value="{{selected_name}}">

但是,在我使用的是选择控制,我需要能够interogate模板值并有条件地设置selected='selected'正确的选项属性。

<select id="project_status_edit" value="{{selected_status}}">
      <option>GOOD</option>
      <option>BAD</option>
      <option>UGLY</option>
</select>

handlesbars.js提供#IF帮手,但这只是给truthy或falsy。

我大概可以破解这种以各种方式,但是这似乎是一个场景,其中会有一个标准的解决方案。

Answer 1:

你可以使用一个帮手:

Handlebars.registerHelper('selected', function(foo, bar) {
  return foo == bar ? ' selected' : '';
});

然后你可以拨打:

<select id="project_status_edit">
  <option{{selected foo "GOOD"}}>GOOD</option>
  <option{{selected foo "BAD"}}>BAD</option>
  <option{{selected foo "UGLY"}}>UGLY</option>
</select>

使用:

{"foo":"UGLY"}

这里试试:

http://tryhandlebarsjs.com/

虽然它似乎没有让我保存它。 :(



Answer 2:

所选答案不工作了。 这是一个老问题,但我的日子不好过了弄清这简单的一件事。 这里是我的解决方案:

Handlebars.registerHelper('selected', function(key, value){
       return key == value? {selected:'selected'}: '';
});

在流星的当前版本中,我们不能设置没有价值的HTML属性和流星不允许使用{{#如果}}无论是。 但传递给助手对象被转换成键值对,并注射。

UPDATE

使用UI.registerHelper代替Handlebars.registerHelper在新的(> 0.8),因为把手命名空间折旧流星的版本( https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated )。



Answer 3:

我曾经在我的项目如下(万一有人需要它:)

  <select class="form-control" id="maritalStatusList" >
      <option {{selectedMaritalStatus  "Single"}}> Single</option>
      <option {{selectedMaritalStatus  "Married"}}> Married</option>
  </select>

Template.editApplicant.helpers({
   selectedMaritalStatus: function(key){
      return key == this.maritalStatus ? 'selected' : '';
   }
});

“this.maritalStatus”会从当前的文档(申请人)的婚姻状况。

使用下面的代码,保存在数据库中的价值

maritalStatus: $('#maritalStatusList').val()

谢谢大家..



Answer 4:

我几乎一个相同的问题,但我值路过了号码,我相信我有该特定情况下,清洁的解决方案,那就是不依赖于把手魔术。

在模板:

<select name="button-style" id="button-style" _val="{{button_style}}">
    <option value="1">Primary Style</option>
    <option value="2">Secondary Style</option>
</select>

基本上你传递你想与_Val选择的属性的数量。 这仅在其中每个选项都有一个连续的数值的情况下是有用的。 另外请注意,如果您命名这个属性的“价值”,它会被覆盖/由默认,它选择第一个选项被忽略。

现在,在您的JS文件的.rendered回调:

Template.templateName.rendered = () ->
    var btn_style = $('#button-style').attr('_val')
    $('#button-style option:nth-child(' + btn_style + ')').attr('selected', 'selected')

这只是选择在对应于我们想要的值这个选择字段的“第n”选项。



Answer 5:

我做了这个功能。 适应你的情况

selectedOption=function(){
        selectedOpt=document.getElementById("yourTagId_Select");
        var att = document.createAttribute("selected");
        att.value = "selected";
        idObj=Session.get("idObj");
        var lib = yourCollection.find({'column._id':idObj}).fetch();      
        for (var i = 0; i < selectedOpt.length; i++) {
             if (selectedOpt[i].value==lib._id._str){               
                return selectedOpt[i].setAttributeNode(att);
            }
        };


    }

后调用函数

selectedOption();



文章来源: Set the selected item in a select list based on template value