2

我试图制作一个动态选择菜单，您可以在其中选择客户，然后过滤该客户的联系人。

当我选择客户时，它会正确过滤联系人，但客户选择菜单未显示任何已选择的内容。

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

2 回答 2

2

在 Meteor 重新渲染你的 select 元素中的 option 元素后，你应该告诉它设置selectedIndexselect 元素上的属性，以便它更新。您可以对rendered事件执行此操作：

Template.newLeadForm.rendered = function() {
  $("#customer_id")[0].selectedIndex = 5; // possibly track the index so you know what to set it to
}
于 2013-02-19T18:22:37.487 回答
0

简单的解决方法：

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

由于newLeadForm依赖于 Session["_customer_id"]，所以每当 Session["syntax"] 改变时都会重新渲染，因此每次 Session["syntax"] 改变时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-20T06:19:48.513 回答