Using jquery.append() method

Question

What's wrong in my code that the append method dont work? I do get the alert but the actual method that will append is not working. Please see the code below:

jQuery(document).ready(function()
{
    if (!document.getElementById('my_options').value)
    {
        alert('here');
        jQuery('#my_options').append('<span id="option_id_error" class="errors">Error</span>');
    }

});

HTML:

<select id="my_options" name="my_options">
       <option value="">--Select--</option>
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
       <option value="3">Option 3</option>
       <option value="4">Option 4</option>
</select>
<br/>
<select id="my_options2" name="my_options2">
       <option value="">--Select--</option>
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
       <option value="3">Option 3</option>
       <option value="4">Option 4</option>
</select>
<br/>
<select id="my_options3" name="my_options3">
       <option value="">--Select--</option>
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
       <option value="3">Option 3</option>
       <option value="4">Option 4</option>
</select>

The select in the form is dynamically generated. If none is selected on the dropdown box, it will display the span error message. So my expected result is this:

<select id="my_options" name="my_options">
       <option value="">--Select--</option>
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
       <option value="3">Option 3</option>
       <option value="4">Option 4</option>
</select> <span>Error</span>

I don't need to add something on the options.

Massimiliano Peluso · Accepted Answer · 2012-08-29 09:20:39Z

1

What you are doing is not correct as a SPAN item is not valid within an SELECT item.

If you try to add a new option for example it will work

$('#my_options').append('<option value="5">item</option>');

what you can do is to wrap the select item inside a DIV as showed below

<div id="option1">
    <select id="my_options" name="my_options">
           <option value="">--Select--</option>
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>
           <option value="3">Option 3</option>
           <option value="4">Option 4</option>
    </select>
</div>

than you can do:

$('#option1').append('<span id="option_id_error" class="errors">Error</span>');

you can see it working at the below link

http://jsfiddle.net/LGkWp/

edited Aug 29, 2012 at 9:20

answered Aug 29, 2012 at 8:46

Massimiliano Peluso

26.8k6 gold badges65 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1149244 Over a year ago

yes yes, it already have the # sign.. I gonna edit my post above.

Massimiliano Peluso Over a year ago

I miss an apostrophe try again

user1149244 Over a year ago

hmmm.. what will be append is not an option value but a <span>Error</span>. I wanna add it after </select>. The result will be like this, <select id="my_options" name="my_options"><option value="">--Select--</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option></select> <span>Error</span>

Massimiliano Peluso Over a year ago

you CANNOT add a SPAN inside a drop down list element(it wont be shown)

user1149244 Over a year ago

is there any way that i can add a span after the </select>? Look like the function i have, will add options in the dropdown box.

|

bezraznizi · Accepted Answer · 2012-08-29 10:32:32Z

0

if you need to add this <span> element just next to <select> you may use .after(..) method:

jQuery('#my_options').after('<span id="option_id_error" class="errors">Error</span>');

answered Aug 29, 2012 at 10:32

bezraznizi

161 bronze badge

1 Comment

user1149244 Over a year ago

Hi, yes.. I actually tried it before you made your response and i found it out working. Anyway, thanks for the help.

Collectives™ on Stack Overflow

Using jquery.append() method

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related