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.