Develop Reference

Dynamically assigned value in dropdown always displaying the default value

The drop-down value is getting selected and I can see the value being highlighted in the drop-down but the display is always showing the first value of the drop-down. I am dynamically selecting the drop-down value in the java script depending on the value returned from other fields. The desktop version works fine but having problem with the mobile version and found that we are using jquery mobile version which could be the cause for this. Any help on how to overcome this.
Have already used the following
document.getElementById(ID).value = value;
Have provided selected=true, used the text option as well.
If i write a automation script my tests are getting passed as the value is getting selected properly but is not getting displayed in the dropdown. If I manually select the values from the drop down I can see the selected value being displayed in the drop-down.

To correctly assign value to a select widget, you need to marked its option to be selected:
document.getElementById('ID').getElementsByTagName('option')[1].selected = 'selected'

using the jquery text() method to assign the dynamic value to drop-down. use the below code
$("#dropDownID option:selected").text()

Unset a JQuery Select

I have this code setup in JS Fiddle so that everyone can see it. I have a piece of code that with the help of the JQuery UI library will make it into a JQuery Select.
$("select").selectbox();
but now my question is, how do i revert to the old select ?
the reason why i want to do this is people should be able to click on one of the radio buttons and it should filter the select by that gender (the class of each option has the gender) but this doesnt work when the select has already been converted

This shoud work:
$('select').selectbox('detach');

you could add a class to the the selected object instead of altering it completely, you can then always select it again quickly

change form based on drop down menu selection

I'm having trouble finding javascript, HTML and/or CSS code that'll change the form based on the drop down menu. For example, the form is for adding a property and the drop down menu selections are single family, condo, apartment but they each have their own set of text boxes, menus and radio buttons. How can I achieve this?

What I have understand from your query is that , you have a from with some fields and you have a dropdown and you want that when ever your change selection in dropdown the form fields values must change accordingly right ?
If that is the issue , then it is very simple , first catch onSelectionChange event of dropdown and try to get selected value and once you get the selected value fill form fields by accessing them accordingly in a condition.Thanks

So I actually already had a piece of code I was fumbling with (http://jsfiddle.net/CYzsY/) for this question and it looks like its not working for me because its based on jQuery 1.7.1 and I'm linking to 1.10.2 in my code. Will make a new post accordingly. Thanks everyone!

show empty value in html select element

I have an HTML select element (combo box) in a form with a couple if options in it. As always each option has a specific value. During the page's initialization I get a value from the server that I must use as the selected option in the list. Sometimes however I get a value from the server that does not match any of the available options. (grrrr)
I want to let the user know that the value I got from the server is not a valid option. What I'd like to do is show an empty select box (as if no selection was made) without having an actual empty option as one of the options. Also I'd like to use the default select element if possible. Is something like this possible?
Edit: When you set the value for a combox to '' in IE9 (I used $('select').val('') ) it empties the text in the combo box which is exactly what I need. Unfortunately only IE9 does this, so this is not an option.

Out of the box, HTML selects do not provide such functionality. You will have to add an empty <option value="somethingwrong">Please, pick a value</option> element and use scripting to check if the user has selected this specific value. I'd suggest catching both onchange event of the dropdown and onsubmit event of whole form.

You can insert option in select, and remove that whenever it is changed to reduce problems with that options
Check the Demo here

How to change rendered selected option in select box with jquery

I have tried many ways to select an option with jquery including .val("0") .attr('selected', 'selected') and .attr('selected', 'true') and the TexoTela plugin. They all seem to update the html but the browser still shows the last item selected by the user.
Try out this fiddle... Select the dropdown value 1 and then click the link.
Is there any way to actually update the displayed value?

You mean change which item is selected?
$('select').val('0');
There are other ways, but this is the basic, following your example.
jsfiddle
You can read up on the documenation for .val() here, and the snippet:
checks, or selects, all the radio
buttons, checkboxes, and select
options that match the set of values.
EDIT for jQuery Mobile
For jQuery Mobile you also need to refresh the select as mentioned in the mobile docs:
If you manipulate a select via
JavaScript, you must call the refresh
method on it to update the visual
styling.
You can do this by:
$('select').selectmenu("refresh",true);

You're setting the option value to zero.
Set the select not the option val
$('select').val('0');
and you'll probably want to use an #id instead just a 'select' selector.

Still use your .val("0") to set the value, and to update in the browser you have to use one of the following:
.trigger("liszt:updated");
or
.trigger("chosen:updated");
Just one will work, depending on how you create your select.
It's gonna be like:
$("#Your_select").val('0');
$("#Your_select").trigger("liszt:updated");