Selecting dropdown element using Javascript or Jquery 3.44/5 (9)
3.44/59

By | May 4, 2016

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:

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:

Method Two: Using plain JavaScript this can be achieved by:

 

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:

Method Two: Using .attr method of Jquery :

You can select elements of a dropdown using .attr() method of jQuery as follows:

In case of modern versions of jquery you must use the .prop() method instead of .attr() method:

If you want to select an option with a specific value Then you can use the following piece of code:

Method Three: using .val method of Jquery :

One of the easiest way is by using val(value) function of Jquery:

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:

Or You can also do it by using trigger method of Jquery :

 

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.

 

More techniques:

Likes(27)Dislikes(6)

Please rate this

23 thoughts on “Selecting dropdown element using Javascript or Jquery

  1. javascriptstutorial Post author

    If you are using jQuery (1.6 or greater version) then you can use this also:

    $('#x option[value="5"]').prop('selected', true)

    Likes(6)Dislikes(1)
    Reply
  2. link m88

    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!

    Likes(0)Dislikes(0)
    Reply
  3. vao m88

    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!

    Likes(0)Dislikes(2)
    Reply
  4. test

    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

    Likes(0)Dislikes(1)
    Reply
  5. Online shop

    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?

    Likes(0)Dislikes(1)
    Reply
  6. Abilify 10 mg

    If you are going for best contents like myself, only go to
    see this site all the time as it presents
    feature contents, thanks

    Likes(0)Dislikes(1)
    Reply
  7. have a peek at this website

    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!!

    Likes(0)Dislikes(0)
    Reply
  8. diovan generic date

    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!

    Likes(0)Dislikes(0)
    Reply
    1. javascriptstutorial Post author

      We are not looking for any content writer at the moment. Thanks!

      Likes(0)Dislikes(0)
      Reply
  9. shop Apotheke

    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!

    Likes(1)Dislikes(0)
    Reply
  10. online

    Great info. Lucky me I came across your website by chance (stumbleupon).
    I have book-marked it for later!

    Likes(0)Dislikes(0)
    Reply
  11. generic for diovan

    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!

    Likes(0)Dislikes(0)
    Reply
  12. JorgeXNono

    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.

    Likes(0)Dislikes(0)
    Reply
  13. Italia

    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!

    Likes(0)Dislikes(0)
    Reply
  14. diovan generic date

    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 .

    Likes(0)Dislikes(0)
    Reply
    1. javascriptstutorial Post author

      Thanks alot Diovan.!

      Likes(0)Dislikes(0)
      Reply
  15. buy

    Hello, I want to subscribe for this weblog to get newest updates, so where can i do it please assist.

    Likes(0)Dislikes(0)
    Reply
    1. javascriptstutorial Post author

      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.

      Likes(0)Dislikes(0)
      Reply
  16. TomasENoia

    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!

    Likes(0)Dislikes(0)
    Reply
    1. javascriptstutorial Post author

      You can reach us at our email id: javascriptstutorial@gmail.com. Thanks!

      Likes(0)Dislikes(0)
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *