Selecting a drop down can be achieved by several techniques using javascript or jquery. Let’s consider we have the following dropdown with few elements:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<select id="drpSelectSourceLibrary" name="asd"> <option selected="selected" value="All">All</option> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> <option value="Four">Four</option> <option value="Five">Five</option> <option value="Six">Six</option> <option value="Seven">Seven</option> </select> |
But first Let’s see how we can do it using javascript.
Using Javascript :
Method one: One of the easiest way to do it by using getElementById method of javascript:
|
1 2 3 |
document.getElementById('drpSelectSourceLibrary').value = 'Seven'; |
Method Two: Using plain JavaScript this can be achieved by:
|
1 2 3 4 5 6 |
// Use first select element var el = document.getElementsByTagName('select')[0]; // assuming el is not null, select 4th option el.selectedIndex = 3; |
Using Jquery :
Method One: Using selectedIndex property of HTML:
You can select element in dropdown using selectedIndex property of HTML, here is how you can write it in order to select a particular option:
|
1 2 3 |
$('select').prop('selectedIndex', 3); // This will select the 4th option from the dropdown list |
Method Two: Using .attr method of Jquery :
You can select elements of a dropdown using .attr() method of jQuery as follows:
|
1 2 3 |
$('select>option:eq(1)').attr('selected', true); |
In case of modern versions of jquery you must use the .prop() method instead of .attr() method:
|
1 2 3 |
$('select>option:eq(3)').prop('selected', true); |
If you want to select an option with a specific value Then you can use the following piece of code:
|
1 2 3 |
$('select>option[value="Two"]').prop('selected', true); |
Method Three: using .val method of Jquery :
One of the easiest way is by using val(value) function of Jquery:
|
1 2 3 |
$('select').val("One"); |
And in order to get the selected value of the dropdown you can use it without any arguments(keeping it emty):
$(‘select’).val();
This will return the selected element of the dropdown.
Also, you if you have <option value=”valueToSelect”>…</option> you can do:
|
1 2 3 |
$("#drpSelectSourceLibrary").val('Four'); |
Or You can also do it by using trigger method of Jquery :
|
1 2 3 |
$("#drpSelectSourceLibrary").val('Five').trigger('change'); |
Method Four: using nth-child() selector of Jquery:
You can also use nth-child() to eq() as it uses 1-based indexing rather than 0-based, The “1-based index” is the better option when manipulating things with dates.
Let’s consider i have given nth-child value 2, i.e. nth-child(2), this will select the 2nd element of the dropdown.
|
1 2 3 |
$('select>option:nth-child(2)').attr('selected', true); |
More techniques:
|
1 2 3 |
$('#drpSelectSourceLibrary option')[3].selected = true; |
(22)Dislikes
(4)
If you are using jQuery (1.6 or greater version) then you can use this also:
$('#x option[value="5"]').prop('selected', true)
This artlcie went ahead and made my day.
When someone writes an piece of writing he/she maintains the thought of a user
in his/her mind that how a user can know it. Thus that's why this paragraph is
perfect. Thanks!
The pucsrahes I make are entirely based on these articles.
Woah! I'm really enjoying the template/theme of this blog.
It's simple, yet effective. A lot of times it's challenging to get that "perfect balance" between superb usability and visual appearance.
I must say you've done a awesome job with this. Also,
the blog loads super fast for me on Firefox. Exceptional Blog!
Nice blog here! Also your web site loads up very fast!
What web host are you using? Can I get your affiliate link to your
host? I wish my web site loaded up as fast as yours lol
Thanks for sharing your thoughts about javascript. Regards
Hey there! I just wanted to ask if you ever have any problems with hackers?
My last blog (wordpress) was hacked and I ended up losing several weeks of hard work due to
no data backup. Do you have any methods to stop hackers?
If you are going for best contents like myself, only go to
see this site all the time as it presents
feature contents, thanks
A motivating discussion is worth comment. There's no doubt that that you need to write more
about this subject, it may not be a taboo subject but typically
folks don't talk about such issues. To the next!
Cheers!!
I absolutely love your blog and find many of your post's to be what
precisely I'm looking for. can you offer guest writers to write content to suit your needs?
I wouldn't mind creating a post or elaborating on a lot of the subjects you write with regards
to here. Again, awesome website!
We are not looking for any content writer at the moment. Thanks!
Hey there, I think your website might be having browser
compatibility issues. When I look at your blog in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping.
I just wanted to give you a quick heads up! Other then that,
very good blog!
Great info. Lucky me I came across your website by chance (stumbleupon).
I have book-marked it for later!
I seriously love your website.. Pleasant colors & theme.
Did you create this amazing site yourself? Please reply back as I'm looking to create my own website and would love to learn where
you got this from or exactly what the theme is named. Thank you!
Heya i'm for the first time here. I discovered this board and that i
find It really helpful & it helped me out a great deal.
I am just hoping to deliver one important thing
back and aid others such as you aided me.
Pretty great post. I simply stumbled upon your weblog
and wished to mention that I've really loved surfing around your blog posts.
After all I'll be subscribing on your feed and I'm hoping you write again soon!
Thanks Italia.
Hi my loved one! I wish to say that this article is awesome,
great written and include approximately all significant infos.
I would like to see more posts like this .
Thanks alot Diovan.!
Hello, I want to subscribe for this weblog to get newest updates, so where can i do it please assist.
We have not added the feature to notify registered yet in our portal. So you need to visit the portal to read the newest articles.
I really love your site.. Great colors & theme. Did you make this amazing site yourself?
Please reply back as I'm trying to create my personal
blog and would like to learn that you got this from or precisely what the theme is
known as. Thanks a lot!
You can reach us at our email id: [email protected]. Thanks!
Awesome post.