使用jquery.append（）方法

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.

Answer 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/

Answer 2

如果需要在<select>旁边添加此<span>元素，则可以使用.after（..）方法：

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