javascript - 更改事件后动态选择菜单不起作用

Question

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

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

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

Answer 1

在 Meteor 重新呈现您的 select 元素中的 option 元素后，您应该告诉它在 select 元素上设置 selectedIndex 属性，以便它更新。您可以使用 rendered 事件执行此操作:

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