How do you select a particular option in a SELECT element in jQuery?

Question:

If you know the Index, Value or Text. also if you don’t have an ID for a direct reference.

This, this and this are all helpful answers.

Example markup

<pre class="default prettyprint prettyprinted"><code><span class="tag"><div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"selDiv"</span><span class="tag">></span>
  <span class="tag"><select</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"opts"</span><span class="tag">></span>
    <span class="tag"><option</span> <span class="atn">selected</span> <span class="atn">value</span><span class="pun">=</span><span class="atv">"DEFAULT"</span><span class="tag">></span><span class="pln">Default</span><span class="tag"></option></span>
    <span class="tag"><option</span> <span class="atn">value</span><span class="pun">=</span><span class="atv">"SEL1"</span><span class="tag">></span><span class="pln">Selection 1</span><span class="tag"></option></span>
    <span class="tag"><option</span> <span class="atn">value</span><span class="pun">=</span><span class="atv">"SEL2"</span><span class="tag">></span><span class="pln">Selection 2</span><span class="tag"></option></span>
  <span class="tag"></select></span>
<span class="tag"></div>

</span></code></pre>

Answer:

A selector to get the middle option-element by value is

<pre class="default prettyprint prettyprinted"><code><span class="pln">$</span><span class="pun">(</span><span class="str">'.selDiv option[value="SEL1"]'</span><span class="pun">)

 

For an index:

$</span><span class="pun">(</span><span class="str">'.selDiv option:eq(1)'</span><span class="pun">)</span></code></pre>

For a known text:

$</span><span class="pun">(</span><span class="str">'.selDiv option:contains("Selection 1")'</span><span class="pun">)</span></code></pre>

EDIT: As commented above the OP might have been after changing the selected item of the dropdown. In version 1.6 and higher the prop() method is recommended:


$</span><span class="pun">(</span><span class="str">'.selDiv option:eq(1)'</span><span class="pun">).</span><span class="pln">prop</span><span class="pun">(</span><span class="str">'selected'</span><span class="pun">,</span> <span class="kwd">true</span><span class="pun">)</span></code></pre>

In older versions:


$</span><span class="pun">(</span><span class="str">'.selDiv option:eq(1)'</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'selected'</span><span class="pun">,</span> <span class="str">'selected'</span><span class="pun">)</span></code></pre>

EDIT2, after Ryan's comment. A match on "Selection 10" might be unwanted. I found no selectorto match the full text, but a filter works:


 
$</span><span class="pun">(</span><span class="str">'.selDiv option'</span><span class="pun">)</span>
    <span class="pun">.</span><span class="pln">filter</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">i</span><span class="pun">,</span><span class="pln"> e</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">return</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">e</span><span class="pun">).</span><span class="pln">text</span><span class="pun">()</span> <span class="pun">==</span> <span class="str">"Selection 1"</span><span class="pun">})


Source: http://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery?rq=1

Advertisements

How to Teach Yourself Programming and Make Six-Figures

jmsevold

Learning to program is probably the second easiest thing in the world. What’s the first then? Getting hired afterwards. Both are deceptively simple, and the coding bootcamp industry is making a fortune off it. What you want to do is become a full-stack, rockstar developer, and in three easy steps, I’ll show you how.

  1. Learn the front end. The way to do this is take Code Academy’s Intro to HTML course. This should take a week, maybe two if you have a full time job. You now know the front-end. You’re halfway there.
  2. Time to become a backend badass. You first need to learn about databases, but really all you need to know is that a database is like an Excel spreadsheet. Ok, time to pick a server side language. Purchase a dart board, and write some server side languages on it. Close your eyes, and throw the dart. Go on code…

View original post 85 more words

Exploring classList API

Since the creation of HTML and the birth of the first websites, developers and designers have tried to customize the look and feel of their pages. This need became so important that a standard, called CSS, was created to properly manage style and separate it from the content. In today’s highly interactive websites, you often need to add, remove, or toggle class names (usually referred to as “CSS classes”). Historically, dealing with these changes in JavaScript was slightly complicated because there were no built-in methods to perform these actions. This was the case until HTML5 introduced the classList API. In this article, we’ll discover how this API works and the methods it provides.

Continue reading