I have run into an interesting little problem that is probably just me being silly.

I have a select box that looks a little like this:

<select id="dom_" name="dom_">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    ...

The options represent days of the month and go up to 31.

Now, I was trying to select a default value when the a form with information is loaded (for editing), but I couldn't get it to work quite right.

I tried using this snippet I found in some previous SO questions:

$("#dom_ option[value$='" + 2 + "']").attr('selected', true);

This line runs and it sets the 2nd option to selected, but it also sets other 2X or X2 options to selected as well. For example, 12 and 22 will also be set to selected.

If however, I use this:

$("#dom_ option").each(function()
{
    if ($(this).val() == 2)
    {
        $(this).attr('selected', true);
    }
    else
    {
        $(this).attr('selected', false);
    }

});

Then the right option will get selected, but the SELECT box will not be updated.

I have to manually call $("#dom_").val(2); afterwords to update the box.

So, my question is, why does the first option not work and why does the second one not auto refresh?

Also, what exactly is the difference between taking a SELECT object via $("#dom_") and calling .val on it versus taking an option and setting selected to true? Do both of these send back the same POST or GET data?

Here is a jsFiddle that hopefully demonstrates this.

If it helps, I am using JQuery 1.6.4 but I could reproduce the same problem on some newer versions in jsFiddle.

I apologize if this question is too simple. I am still quite an amateur when it es to JavaScript and JQuery.

I have run into an interesting little problem that is probably just me being silly.

I have a select box that looks a little like this:

<select id="dom_" name="dom_">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    ...

The options represent days of the month and go up to 31.

Now, I was trying to select a default value when the a form with information is loaded (for editing), but I couldn't get it to work quite right.

I tried using this snippet I found in some previous SO questions:

$("#dom_ option[value$='" + 2 + "']").attr('selected', true);

This line runs and it sets the 2nd option to selected, but it also sets other 2X or X2 options to selected as well. For example, 12 and 22 will also be set to selected.

If however, I use this:

$("#dom_ option").each(function()
{
    if ($(this).val() == 2)
    {
        $(this).attr('selected', true);
    }
    else
    {
        $(this).attr('selected', false);
    }

});

Then the right option will get selected, but the SELECT box will not be updated.

I have to manually call $("#dom_").val(2); afterwords to update the box.

So, my question is, why does the first option not work and why does the second one not auto refresh?

Also, what exactly is the difference between taking a SELECT object via $("#dom_") and calling .val on it versus taking an option and setting selected to true? Do both of these send back the same POST or GET data?

Here is a jsFiddle that hopefully demonstrates this.

If it helps, I am using JQuery 1.6.4 but I could reproduce the same problem on some newer versions in jsFiddle.

I apologize if this question is too simple. I am still quite an amateur when it es to JavaScript and JQuery.

• javascript
• jquery

• Is there a reason you're doing this with jQuery rather than just the html attribute? – Colleen Commented Feb 25, 2013 at 20:32
• $("#dom_ option[value='2']").prop('selected', true); if you don't need the 2 to be a variable... – Mark Schultheiss Commented Feb 25, 2013 at 20:41

3 Answers 3

You are using the ends with ($=), instead just use value= which will only match exactly the value you want.

$("#dom_ option[value='" + 2 + "']").attr('selected', true);

It sounds like a simple enough design that you don't need to do this in javascript (i.e. if it's static content and you just need a simple default). Do you know that you can just apply the "selected" attribute to your html option tag?

<select id="dom_" name="dom_">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    ...

Both should work now,

1) As per Jquery Ends With Selector([name$="value"]) will Selects elements that have the specified attribute with a value ending exactly with a given string.

  $("#dom_ option[value='" + 2 + "']").attr('selected', true);

2) In the second example, else case is unnecessary as it will reset the selected option

$("#dom option").each(function()
{
    if ($(this).val() == 2)
    {
        $(this).attr('selected', true);
    }
});

Check this Jsfiddle http://jsfiddle/NUTWR/