動態選擇菜單在更改事件後不起作用

我試圖製作一個動態選擇菜單，您可以在其中選擇一個客戶，然後過濾該客戶的聯繫人。動態選擇菜單在更改事件後不起作用

當我選擇一個客戶時，它會正確過濾聯繫人，但客戶選擇菜單不顯示任何選擇。

<template name="newLeadForm"> 

<form id="lead"> 
    <fieldset> 
     <legend>New Lead</legend> 
     <br/> 
     <select id="customer_id" class="span12"> 
      <option id="null" value="null">Select One</option> 
      {{#each customers}}<option id="{{id}}" value="{{_id}}">{{name}} - {{city}}, {{state}} {{zip}}</option>{{/each}} 
     </select> 
     <select id="contact_id" class="span12"> 
      <option id="null" value="null">Select One</option> 
      {{#each contacts}}<option id="{{id}}" value="{{_id}}">{{first_name}} {{last_name}}</option>{{/each}} 
     </select> 

     <input id="submit" type="submit" class="btn"> 
    </fieldset> 
</form> 

</template>

下面是數據提供給模板

Template.newLeadForm.customers = function() { 
return Customers.find(); 
}; 

Template.newLeadForm.contacts = function() { 
console.log(Session.get("_customer_id")); 
return Contacts.find({customer_id: Session.get("_customer_id")}); 
};

和事件處理程序

Template.insert.events({ 
'change form#lead #customer_id' : function (event) { 
    customer = $("form#lead #customer_id").val(); 
    Session.set("_customer_id", $("form#lead #customer_id").val()); 

}, 

'submit form#lead' : function (event) { 

    if (event.type === 'click' || event.type === 'submit') { 

     event.preventDefault(); 

     var customer_id = $("#customer_id").val(); 
     var contact_id = $("#contact_id").val(); 
     var lead_source_id = $("#lead_source_id").val(); 
     var lead_number = $("#lead_number").val(); 

     if(Leads.insert({id: Leads.find().count() + 1, customer_id: customer_id, contact_id: contact_id})) { 
      $("#customer_id").val(null); 
      $("#contact_id").val(null); 
      Session.set("_customer_id", null); 
     } 
    } 
} 
});

來源

2013-02-19 Moshe

你也可以使用把你的聯繫人在另一個模板'{{>模板}}'和變化那一個，而不是'newLeadForm'不重新呈現 – Akshat 2013-02-20 07:23:32

@Akshat你的答案是什麼工作，如果你張貼它作爲答案我會接受的是答案。 – Moshe 2013-02-20 19:45:59

流星後重新呈現的選項元素在你選擇元素，你應該告訴它在select元素上設置selectedIndex屬性，以便它更新。

Template.newLeadForm.rendered = function() { 
    $("#customer_id")[0].selectedIndex = 5; // possibly track the index so you know what to set it to 
}

來源

2013-02-19 18:22:37 Rahul

我在插入事件中添加了這個函數，但它似乎並沒有這樣做。 – Moshe 2013-02-20 04:52:04

我不確定我解釋得很好。在第一次下拉菜單中做出選擇之後，它會很好地過濾他的結果，但如果在第一次下拉菜單中更改了選擇，它將更新第二次下拉菜單的結果，但第一次下拉菜單將返回默認顯示沒有選中「選擇一個」。無論如何，謝謝你的回答，試着對渲染進行更多的研究 – Moshe 2013-02-20 04:52:32

簡單的解決方法：你可以用rendered事件做到這一點

Template.newLeadForm.rendered = function(){ 
    $('#customer_id').val(Session.get("_customer_id")) 
}

由於newLeadForm取決於會話[ 「_ CUSTOMER_ID」]，它會被重新渲染每當會話[ 「語法」]每次更改Session [「語法」]時都會調用template.hello.rendered。

另一種選擇，你可以添加一個自動運行的每個選擇你想保持更新：

if (Meteor.isClient){ 
    Meteor.startup(function() { 
    Deps.autorun(keep_cust_select_updated) 
    }) 

    function keep_cust_select_updated(){ 
    $('#customer_id').val(Session.get("_customer_id")) 
    } 
}

每當Session.set("_customer_id", xxxx)被調用，keep_select_updated將被重新（因爲它是依賴於Session.get("_customer_id")）和將選擇正確的值（通過jQuery $('#customer_id').val(...)調用）。

後一種方法的優點是你不需要費心正確添加"selected"到HTML每個<option>

來源

2013-07-20 06:19:48 JobJob

動態選擇菜單在更改事件後不起作用

回答

相關問題