CODEWITHSUNDEEP
javascriptjqueryappend
user1149244
user1149244

Reputation: 755

Using jquery.append() method

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.

Upvotes: 0

Views: 322

Answers (2)

bezraznizi
bezraznizi

Reputation: 16

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>');

Upvotes: 0

Massimiliano Peluso
Massimiliano Peluso

Reputation: 26737

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/

Upvotes: 1

Related Questions