HTML Select loses selection when re-rendered in Meteor

问题

I have a couple of HTML elements on a page. Whenever the page context is invalidated and it re-renders the elements are re-rendered with no visual cue of the selected option.

If I check for the selection using $('.select1 option:selected') the selected option is returned. However, it is not rendered as selected. If it's a drop-down, then the first element shows up. If it's a multi-line select, the first (firefox) or last (chrome) element shows up with a greyed out select line on it.

If I then click the selected element a second time, it shows up as selected.

Anyone know how to fix this?

回答1:

I implemented the solution here: Meteor form state not being saved

Store the selected value in a session variable on click:

Template.packageViewer.events({
    'change .tagselect': function(){
        Session.set('tag', $('.tagselect :selected').html());}
    ,
    'change .groupselect': function(){
       Session.set('group', $('.groupselect :selected').html());}
    ,
    'change .packageselect': function(){
        Session.set('package', $('.packageselect :selected').val());}
});

Then set the select selected value in the post-render function:

Template.packageViewer.rendered = function(){
    $('.groupselect').val(Session.get('group'));
    $('.tagselect').val(Session.get('tag'));
}

Hacky, but works.

回答2:

Maybe you can use $('.select1').trigger("change"); function.

来源：https://stackoverflow.com/questions/13012343/html-select-loses-selection-when-re-rendered-in-meteor

标签

html

select

rendering

meteor