Unable to select option for Select control with runat=server

[FCamarillo1160]

I have an html Select with runat=server. I populate the control on server side. This gives it an Id similar to "ctl00_PlaceHolderMain_SitusAddressForm_ddlSitusStreetTypeShort". I am able to select options through the UI. I need to programmatically select an option based on a string value. I've seen examples to do this like so:

var selectPreDirShort = $('#ddlSitusPreDirShort'); selectPreDirShort.find("option[value='East']").attr('selected', 'selected'); selectPreDirShort.data("selectBox-selectBoxIt").refresh();

This method works only on client-side Selects. My Select control has a class named 'StreetTypeShort'. The jQuery selector finds the control by class e.g $('.StreetTypeShort'). However, the "find" method on the object does not. Any idea what is needed to be able to use your plugin with server-side Select controls?

[gfranko]

Have you tried using the SelectBoxIt selectOption() method? Like this:

  // Selects an option that contains the text 'someValue'
  $('select').selectBoxIt('selectOption', 'someValue');

For more details, check out the method documentation

[FCamarillo1160]

Thanks for the quick reply.

I tried that. Got this error: cannot call methods on selectBoxIt prior to initialization; attempted to call method 'selectOption' .

The combo boxes have already been filled on document ready. Later on upon clicking a button I try to see first if combo A contains the option text, if not then I search combo B. Then, depending on which combo has it, I want to select the option. So I need help in finding the option and selecting the option.

[gfranko]

It looks like you are using the correct selector for finding options with specific text. Are you using jQuery on the server?

[FCamarillo1160]

No, I'm using C# code behind file to populate the combo boxes from a Db.

[gfranko]

I personally have never used C#, so I don't think I can be much help on the server side in this case. Is this a SelectBoxIt question or a more general question?

[FCamarillo1160]

My issue is with SelectBoxit. I believe it might be related to the fact that the Id of the Select control is not your common naming convention. Take a look at my original question. Does your plugin expect the Id of the Select and the new created UL in a certain format?

[gfranko]

If there is an id on the original select box, then SelectBoxIt creates a new id that you can use to reference your select box. All other attributes/class names are copied over to the new dropdown.

[FCamarillo1160]

This is the new id created: ctl00_PlaceHolderMain_SitusAddressForm_ddlSitusStreetTypeShortSelectBoxIt Do you see any reason why I can't reference the select box with this id?

[gfranko]

ctl00_PlaceHolderMain_SitusAddressForm_ddlSitusStreetTypeShort is the id of the original select box.

ctl00_PlaceHolderMain_SitusAddressForm_ddlSitusStreetTypeShortSelectBoxIt is the id that SelectBoxIt generates for the new dropdown. Since id's are supposed to be unique, SelectBoxIt does not just copy over the original id.

Keep in mind, that SelectBoxIt does not delete the original select box, so you can still reference the original select box using #ctl00_PlaceHolderMain_SitusAddressForm_ddlSitusStreetTypeShort

[FCamarillo1160]

Ok, so I was able to set the selected option in the original select box. But the selectboxit select is not updated. How do I keep the two in sync?

[gfranko]

You can either manually trigger the change event, OR call the SelectBoxIt refresh() method.

Manually Triggering the Change Event:

var selectBox = $('select').selectBoxIt();
selectBox.trigger('change');

Calling the SelectBoxIt Refresh Method:

var selectBox = $('select').selectBoxIt();
selectBox.selectBoxIt('refresh');

[FCamarillo1160]

This is how I set the original select box value: $("#ctl00_PlaceHolderMain_SitusAddressForm_ddlSitusStreetTypeShort option[value='ST']").prop('selected', true);

This is trying to call the refresh method:
var sb = $('#ctl00_PlaceHolderMain_SitusAddressForm_ddlSitusStreetTypeShortSelectBoxIt').selectBoxIt(); sb.selectBoxIt('refresh');

This is the error I'm getting?????? Unable to get value of the property 'off': object is null or undefined

[FCamarillo1160]

So I gave up trying to load the Select controls on the server and instead added them to the markup and everything works fine. Thanks alot for your help. Overall your plugin is awesome!

[gfranko]

Awesome, glad you like it!