根据模板值在选择列表中设置所选项目

Posted 2023-03-08

【中文标题】根据模板值在选择列表中设置所选项目

【英文标题】：Set the selected item in a select list based on template value

【发布时间】：2012-08-20 21:26:41

【问题描述】：

如何使用模板中的当前值正确地预填充选择控件？

我有一个简单的表单来编辑一条记录，其中在显示表单时预先填充了所选记录的值。有点像这样：

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

但是在我使用选择控件的地方，我需要能够查询模板值并有条件地设置 selected='selected' 属性以获得正确的选项。

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

handlesbars.js 提供了 #IF 帮助器，但这只会给出真假。

我可能会以各种方式破解它，但这似乎是一个有标准解决方案的场景。

【问题讨论】：

我可能会在select 上使用脚本助手将selected 添加到适当的option 或每个option 中的if。您还可以预编译select 和options 并描述哪个是option selected（我认为）。我不知道有没有一种结构可以直接或优雅地在普通车把模板中处理这个问题。

使用#if（或其他助手）是我的第一个想法，但我不知道如何获得实际价值 - 有可能/你有一个例子吗？预编译会起作用，但是这会超出结构的范围，并且会消除模板的好处，理想情况下我想避免这种路径。

你的意思是<option#if selected_status == 'this option' selected/if>this option</option>?

是的，除了给出：...Error: Parse error, if selected_status == 'GOOD' selected -------------------------------------------------------------^ Expecting 'STRING', 'INTEGER', 'BOOLEAN', 'ID'

嗯。是的，我不认为你可以使用助手或预编译。我在考虑 Smarty 模板，而 Handlebars 源代码并不意味着不支持条件。

【参考方案1】：

您可以使用助手：

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

然后你可以打电话给：

<select id="project_status_edit">
  <optionselected foo "GOOD">GOOD</option>
  <optionselected foo "BAD">BAD</option>
  <optionselected foo "UGLY">UGLY</option>
</select>

使用：

"foo":"UGLY"

在这里试试：

http://tryhandlebarsjs.com/

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

【讨论】：

或者您可以将 handlebars.js 从 CDN 中拉出并 jsfiddle 它：jsfiddle.net/ambiguous/w2wyU/1

我的个人资料中有一堆书签，因为我厌倦了一直跟踪各种 JS 和 CSS。

【参考方案2】：

我遇到了几乎相同的问题，但我传递的值是数字，我相信对于这种特定情况我有一个更简洁的解决方案，即不依赖于 Handlebars 魔法。

在模板中：

<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 个”选项。

【参考方案3】：

所选答案不再有效。这是一个老问题，但我很难弄清楚这个简单的事情。这是我的解决方案：

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

在当前版本的meteor中，我们不能设置没有值的html属性，并且meteor也不允许使用#if。但是传递给助手的对象被转换成键=值对并注入。

更新

在新 (> 0.8) 版本的流星中使用 UI.registerHelper 而不是 Handlebars.registerHelper，因为 Handlebars 命名空间已被弃用 (https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated)。

【讨论】：

现在我们是 Blaze 后，您可以使用 UI.registerHelper 而不是 Handlebars.registerHelper。

这是一条旧评论。我应该在上面写下版本号。

【参考方案4】：

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

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();

【参考方案5】：

我在我的项目中使用了以下内容（以防有人需要它:)

  <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()

谢谢大家..