流星獲取動態生成的值

Question

我想獲取一些動態生成的選擇的值，我將其添加到窗體。我認爲我做得正確，但它只返回第一個選擇值。

表單模板：

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

動態選擇模板：

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

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

最後是用於提交事件形式：

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

我感到奇怪的是，當我.text()取代.attr("value")它確實增加了兩種選擇的選項，但它concatinates在一起。

Answer 1

您將不得不使用瀏覽器默認選擇來做你正在做的事。

使用完全基於HTML的選擇小部件。然後，想想你怎麼可能標誌着selected被動（考慮{{selected}}屬性您{{#each allContacts}} ...塊內。然後，如果你想操作的任何文字，使用allContacts助手操縱它，例如：。

<div class='select-widget'> 
{{#each allContacts}} 
    <div id='{{_id}}' class='select-widget-row {{#if selected}}selected{{/if}}'> 
     {{fullname}} 
    </div> 
{{/each}} 
</div>