Hiding a dropdown Box and to create another dropdown box and to make it appear in the same Place in JQUery

Question

Hi,

How to change the options in a Dropdown box using JQuery.

For Eg.

 1. <select name="fieldSize" id="fieldSize">
<option>Choose a size </option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
 </select>

I want to change the options as

2.   <select id="fieldSize" name="fieldSize">
   <option selected="selected" value="phone" id="fieldPhoneAmerican">### - ### - ####</option>
   <option value="europhone" id="fieldPhoneEuro">International</option>
</select>

Like i want to hide the select marked as 1 and to make 2 to appear in this place .How can i do so.

Answer 1

You be able to do the following:

$('#fieldSize').html('<option selected="selected" value="phone" id="fieldPhoneAmerican">### - ### - ####</option><option value="europhone" id="fieldPhoneEuro">International</option>');

This will remove all of the options from the select and add the 2 new ones.