[shaiman]

When I change the value of my select list in javascript, the value of the list items changes but the actual text displayed in the initial selector does not change. I have a select list item with the id of DateRangeFilter. It has 7 possible values. When I change the value in javascript by doing this:

var sel = document.getElementById(‘m1-Filters-hidden-select-DateRangeFilter’);
var val = document.getElementById(‘HiddenDateFilter’).value;
for(var i = 0, j = sel.options.length; i < j; ++i) {
if(sel.options[i].value == val) {
sel.selectedIndex = i;
$(‘select[name=”DateRangeFilter”] option:eq(i)’).attr(‘selected’,’selected’);
phoneui.preprocessDOM(‘#m1-Filters’); //force UI to update
}
}

The value of the option selected changes correctly, but the text of the initial selector remains at the default. It seems that the initial selector is not being refreshed. Any ideas what I’m doing wrong? Again, the value is being changed correctly, but the text being shown remains at the default unless I click on the option I want. But if I change this in javascript without clicking on the option the text continues to be the default one.

help!

[support-octavio]

Hi shaiman,

Note that this question was answered here: http://www.genuitec.com/support-genuitec/viewtopic.php?p=9493#p9493
Let me know how it goes for you.

[shaiman]

This is what I am looking for, but I’m still stuck. I’m not sure what the selListId and listName variables should be in my app. I’m looking at the code:

var itemToSelect = $(‘select[name=’+listName+’] :selected’).prop(“selected”, false);

var selId = $(‘#’ + selListId + ‘> li’).each(
function (i) {
$(this)[i == itemToSelect ? ‘addClass’ : ‘removeClass’](m1Design.css(“selected”));
});

// This line updates hidden select, for the case the whole
// design will be used as a form
phoneui.preprocessDOM(‘#’ + selListId);

My app’s ul is:

<ul id=”m1-Filters-m1-Filters-selectListMenu3-selection-list”
class=”m1-rounded-list m1-selection-list m1-list” data-multiple=”false”
data-selectionInfoId=”m1-Filters-selectListMenu3-selinfo” data-hiddenInputId=
“m1-Filters-hidden-select-selectListMenu3″>
<li id=”m1-Filters-m1-Filters-selectListMenu3-si-value1”

I am assuming then the correct setting for selListId should be:

var selListId = ‘m1-Filters-m1-Filters-selectListMenu3-selection-list’;

What I am not sure of is what the listName variable should point to. Should this be the select list? The UL does not have a name attribute, so I’m not sure which I should use.

Again, I am not having any issue setting the value of the select list, but am having trouble getting the UL selected value correct.

From what I see above, the code removes the selected class to all LI items. How do I set the selected attribute for the correct LI item?

Finally, I’m not sure what m1Design.css refers to. Is m1Design a variable that I need to set?

Thanks so much for your help here.

[shaiman]

I have been able to get this to work smoothly at last. Here is the final code that I am using:

var sel = document.getElementById(‘m1-Filters-hidden-select-DateRangeFilter’);
var val = document.getElementById(‘HiddenDateFilter’).value;
var i;
for(i = 0, j = sel.options.length; i < j; ++i) {
if(sel.options[i].value == val) {
$(‘select[name=”DateRangeFilter”] option:eq(‘ + i + ‘)’).attr(‘selected’,’selected’);
break;
}
}
var selListId = ‘m1-Filters-m1-Filters-DateRangeFilter-selection-list’;
var listName = ‘DateRangeFilter’;
var selId = $(‘#’ + selListId + ‘ > li’).each(
function (k) {
$(this)[i == k ? ‘addClass’ : ‘removeClass’](m1Design.css(“selected”));
});

Hope this helps someone out there. If not, please post to me and I’ll do all I can to be of help.

[support-octavio]

@shaiman,

Thanks for sharing your success and posting your code. Marking thread as closed.

[Author]

Posts