0
私はフォームに追加する動的に生成された選択肢の値を取得しようとしています。私はそれを正しくやっていると思いますが、最初の選択値だけを返します。Meteor動的に生成された値を取得する
フォームテンプレート：
<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>動的SELECTテンプレート：
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。