Nice tips.

You say “try to avoid using the dom directly” — why?

Other gotchas of select boxes: select that allows multiple selected options behaves differently.

Also, the val() of an option that does not have a “value” attribute is the the text() string.

The reason it’s called “select” instead of a “DropDownList” is a) Microsoft, thankfully, doesn’t get to name things all the time, and b) HTML is supposed to be presentation independent. Calling it “select” allows the client to display the list of options however they want. Same reason that “i” and “b” are deprecated in favor of “em” and “strong.”

[...] JQuery: Playing with Select (DropDownList/ComboBox) [...]

Hi,

I am looking for a way to trigger a dropdown to clear any value that has been selected from it, so it returns to its default state where nothing is selected.

The best way i’ve found to achieve this is to prepend a blank option to the dropdown and then select that blank option:

$(“#dropdown”).prepend(“”);
$(“#dropdown option:first-child”).attr(“selected”,”selected”);

But ideally I would prefer not to have a blank option in the dropdown selector so that I dont have to validate the user to ensure they are not submitting a blank value.

What i’m wondering is if there is a simple way to tell the dropdown to return to the state where nothing is selected, e.g. if there was something like (“#dropdown”).reset – any ideas?

@Mark Puddephatt

Whoop a bit of my script seems to have got lost, it should be:

$(“#dropdown”).prepend(“”);
$(“#dropdown option:first-child”).attr(“selected”,”selected”);

(without the spaces on the option tags)

OK sorry about this, but the comments box doesnt like html code! But the prepend has an option tag inside the quotes…

@mark, as far as I know, a dropdown ALWAYS has a selected item. By default it is the first item in the list. So your dropdown needs a blank item in it if you want a ‘nonselected’ option.

The alternative is to not use a dropdown at all. Instead use a textbox that links to a hidden div that dispalys when the textbox is selected/clicked. The JQuery Calendar control does this.

Hi, I’m french and i have a problem. Maybe coud you help me.
I use combobox
here : http://jquery.sanchezsalvador.com/jquery/page/jquerycomboboxapi.aspx

And i put an onchange on my select. With “onchange”, a “option” is like an “a href”.

But there is no result.
Could you help me please ?

Very consise article, with everything I wanted to know about jQuery and select-options or drop down lists. Thanks so much!

I m NK NANDA,i want to know more about details.with demo

EXCELLENT! Thank you so much

how can we remove certain options from Select list based on the text value of that option ?

(note: it is not just the selected option , but some of the options need to be removed based on the text)

e.g. I want to remove options that have the text starting with *

*one*
two
three
*four*

how can we remove certain options from Select list based on the text value of that option ?

(note: it is not just the selected option , but some of the options need to be removed based on the text)

e.g. remove any option that starts with the text *

*one*
two
*three*
*four*

i have two combo box from the first combo box i am loading the second combo box when i select the items in second combo box it’s always showing the first element it’s not getting my selected item.

I have only just started with jQuery but this may work for you:

$(‘#tryit option’).each(function(){ if($(this).text().indexOf(‘*’) > -1) $(‘#tryit option’).remove(‘:contains(“‘ + $(this).text() + ‘”)’); });

You may want to try that, i haven’t tested it, but from the documentation it says it should work.

thank you so much – you will master jquery pretty well – this code just worked sweeeet!

Part 5 – Modify the list:

For “Clear the list”, this would suffice: $(“#ComboBox”).empty();

Hello Chris,

I have been trying to implement the nice tips in your tutorial to resolve a dropdown problem.I am using jquery.validate.js plugin.

I hope you can help me with me this.

How do I make one element required based upon a dropdown list’s selected OPTION?

ex:

Please note that the select and the textbox are arrays. I have addNewRow and DeleteRow methods to dynamically add/delete rows.
___________________________________________________
Books and Titles 

Choose One
jQuery
PHP
Perl
Other – please specify name

If “Other – please specify name” is selected, then the input with name “otherbook[ ]” must be required.

I tried as below but it does not work:

rules:{
“otherbook[]“: {
required: function(){
return $(“#books option:selected”).text()==”Other – please specify name”;
}
}

I just can’t figure out how to do this.

Appreciate your help and thanks in advance.

Hello Chris,
I hope your still reading this thread
I need some help with my code
I have two dropdown lists and each option has a value. What I want is to get the value of both selections and compare them and show the result to the user.
would appreciate any hint
ibrahim

Great post!! I’m working on a project requiring this sort of functionality. My biggest challenge is going to getting the value from multiple dropdown…er “select” boxes based upon class only (dynamically generated, so no can’t hard-code id’s). Any thoughts? Thanks.

$(‘#selename,#selname’).live(‘change’,function(){
if($(‘#selename’).find(‘option:selected’).val()===$(‘#selname option:selected’).val()){
$(‘#myDiv’).text(‘equal’);
}else $(‘#myDiv’).text(‘not equal’);
});

HI can any one tell me how to get all the combobox value into an array using jquery

wsdadsd

wsdadsd

Nice

Cool comment Form

 i and b are NOT deprecated in favour of anything, only u is deprecated. Which you use depends on the context / situation.

 Also, the reason it isn’t called DropDownList or anything like that is that the select element can have a size, which turns it into a list box rather than a drop down list.

Thanks, this is great — simple and to the point. jQuery is amazing.

Tip:

if you want to do this on more than one element, rather than specifying the ID, just do this:

$(‘select’).change(function() {
    var selectedOption = $(this).find(‘option:selected’);
    var selectedOptionValue = $(selectedOption).val();
    var selectedOptionText = $(selectedOption).text();
   
    alert(“You selected” + selectedOptionText + “Value: ” + selectedOptionValue);
});

Or obviously if you just wanted to target only certain dropdowns, change first line to:

$(‘select.className’).
or
$(‘#containerElement select’).

or whatever.

Hope someone finds this useful.

dustin

Awesome, #4 was just what I was looking for. Thank you for sharing.

good stuff

nice

Very Useful..  Cheers..

nice to paly with jquery

Hi,

 You steps are looking so good. But its too helpful if you upload the hole code also.

$(‘#edit_tag_type’)[0].options[type].selected = true
this string change selected item, where type is number of intem.

Excellent article.  It allowed me to get my select working with jquery very quickly.  However, I am lost on one missing item. Is it possible to add an optgroup using jquery.  ie. build your example entirely from jquery?  My select is geographic areas (countries) that contain subgroups (states for instance).  I am starting with an empty select and adding everything based on an array of geo objects.

 i have  53 options in my select. I need to go to the 34th week. I was able to select that option using $(“#ComboBox”).val(34);. But the dropdown is customed to show only 10 entries. so its showing from 1 – 10 .but i need it to show from 30-40.Please help

 how controle a dropdownlist in the case when i select province in dropdownlist1
it give there district on the dropdownlist2

good work thanks for sharing….

thanks a lot ..

Really nice

usefull statements, very good descriptions how to play with select using jquery………..

Hi Chris,
Code seems simple & straightforward. But I can’t seem to make it work.

I used
$(#DropDownList1″).val(2);
alert(“#DropDownList1″).val());

The message was undefined. 

Here is my problem. I need to get StatusCode from Main table, look up the Status on StatusDesc Table and show the Description on a dropdown. All of this to be done progammatically.  Meaning, I have to pass on the StatusCode to the .click function… Simple, I’ve done it in other programming languages. But asp.net is killing me. did not work, so I turned to jQuery.

Any insights?
Thanks in advance!
Renee

It lets you “select” an “option” – DropDownList and ComboBox imply absolutely nothing about the function of the element.

fds

sorry for earlier. nice tip. thanks for sharing. 

excellent article Chris.
i seem to be having troubles using the code in item #4
it doesnt change what i see (ie9 and ff)
however, oddly enough
.. alert($(
alert($(
‘#unitPrefFlowLiquid option:selected’).text());

does show me what i expect. Just it doesnt change the text.

does show me what i expect. Just it doesnt change the text.

Hi,

this is a great article. But it lacks some more advanced scenarios that I think worth adding. One is about how to deselect an option and the other one is how to remove all options.

sdfsdafsdafsdfsdfsdfsdf

GoodDay !
From the above mentioned example , I have selected “VALUE1″ ….
it is displaying twice.
How to hide this.