Question

我正在尝试获取一些动态生成的选择的值，我将添加到表单中。我想我正在做的，但它只返回第一个选择值。

表格模板：

＆＃13;

<form id="Dynamic" class="add-clients col s12 m10 offset-m1 white z-depth-1">
      <div class="row">
        <h4>Add a new company with company contacts.</h4>
        <hr>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">business</i>
          <input id="company_name" name="company_name" type="text" class="validate">
          <label for="company_name">Company Name</label>
        </div>
      </div>
      <div class="input-placeholder row">
        <!--append contact select-->
      </div>
      <div class="row">
        <div class="add-contacts input-field col s12">
          {{> ContactSelect}}
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <button class="btn-large waves-effect waves-light" href="#" id="s">Save Company</button>
        </div>
      </div>
    </form>

＆＃13;

动态选择模板：

＆＃13;

Template.ContactSelect.events({
  'click .add-select'(event){
    $( ".first-select .contact-selectBox" ).clone().appendTo( ".incoming-input" ).after('<a href="#" class="btn">Remove</a>');
  },
});

＆＃13;

<template name="ContactSelect">
  <div class="first-select input-field col s12">
    <select class="contact-selectBox browser-default">
      <option value="" disabled selected>Choose your option</option>
      {{#each allContacts}}
        <option value="{{_id}}">{{fullname}}</option>
      {{/each}}
    </select>
  </div>
  <div class="incoming-input input-field col s12">

  </div>
  <div class="multiply-select col s12">
    <a class="add-select btn-floating btn waves-effect waves-light red"><i class="material-icons">add</i></a>
  </div>
</template>

＆＃13;

最后是表单的提交事件：

＆＃13;

Template.ClientAddNew.events({
  'submit .add-clients'(event, template){
    event.preventDefault();
    var selection = {};
    template.$("option:selected").each(function(index){
      selection["box"+index] = template.$("option:selected").attr("value");
    });
    console.log(selection);
  }
});

＆＃13;

我觉得奇怪的是，当我用.attr("value")替换.text()时，它会添加两个选定的选项，但它会将它们合并在一起。

Answer 1

使用浏览器默认选择尝试做你正在做的事情会很糟糕。

使用完全基于HTML的选择小部件。然后，考虑如何标记selected被动地（考虑{{selected}}块内的{{#each allContacts}} ...属性。然后，如果您想操纵任何内容的文本，请使用{{ 1}}帮助器。例如：

allContacts

流星获取动态生成的值

1 个答案: