jQuery Gotcha: val() might select the wrong option at a select element
Let's imagine you have the following select element:
<select
id="someSelect">
<option
value="">-Select-</option>
<option value="12">21</option>
<option value="11">20</option>
<option value="10">19</option>
<option value="9">18</option>
<option
value="8">17</option>
<option
value="7">16</option>
<option
value="6">15</option>
<option
value="5">14</option>
<option
value="4">13</option>
<option value="3">12</option>
<option value="2">11</option>
<option value="1">10</option>
</select>
Notice that the text in some options appears as value in other
options.
you can get a select like this when composing an age drop
down for example.
Now for the Gotcha: which option will be chosen as a
result of the following expression:
$("#someSelect").val("12");
???
Answer:
the selected option will be <option value="3">12</option>
and
not the option with the value of 12 as we intended.
Why
this happened?
Let's look at the part of the
jQuery(varsion 1.3.2) val() function that handles the Select:
...
else if (
jQuery.nodeName( this, "select" ) )
{
var values
= jQuery.makeArray(value);
jQuery( "option", this
).each(function()
{
this.selected =
(jQuery.inArray( this.value, values ) >= 0 || jQuery.inArray( this.text,
values ) >= 0);
});
if ( !values.length )
this.selectedIndex = -1;
}
...
it loops on all the items of the select and tries to match either
the value or the text against the input value,
it was designed to help us select options by text, but i find it a bit annoying...
How to avoid this Gotcha?
for select elements
of this nature you can use:
$("#someSelect
option[value=" + val + "]").attr("selected", "selected");
or
jqThePrefoundSelect.find("option[value="
+ val + "]").attr("selected", "selected");
or... well you
get the point - just make sure you find the option by it's value and
not it's text.
hope this helps.
והסבר קצר בעברית:
שימו לב ל select שהצגתי לעיל,
בחלק מה options שלו יש ערכים שמופיעים כטקסט ב options אחרים.
זהו תרחיש אפשרי למשל במתן אפשרות לבחירת גיל של משתמש.
במידה ונרצה לבחור ערך באמצעות jQuery בצורה הבאה:
$("#someSelect").val("12");
במקום שתיבחר ה option בעלת הערך 12(כמו שרצינו), תיבחר ה option בעלת הערך 3, כיוון שהטקסט שלה מכיל 12
את הסיבה לכך הצגתי בקטע הקוד מהפונקציה val לעיל(קטע הקוד הבעייתי מסומן בצהוב):
רצים בלולואה על כל ה options ומנסים למצוא התאמה לערך
ולטקסט,
זה נועד לאפשר בחירה קלה של ערך לפי הטקסט שלו, אבל במקרה שלנו זה משבש את העניינים.
אז מה עושים?
מוודאים שבוחרים את ה option הנכון לפי הערך שלו, ולא לפי הטקסט.
הצגתי לעיל שתי אפשרויות(כמובן שאפשר בעוד דרכים, גם לולאה פשוטה ב JS תעשה את העבודה)
אחת מהצורות שהצגתי:
$("#someSelect
option[value=" + val + "]").attr("selected", "selected");