隐藏下拉框并创建另一个下拉框并使其显示在JQUery中的相同位置

Question

如何使用JQuery更改下拉框中的选项。

对于例如。

 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>

我想将选项更改为

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

就像我想要隐藏标记为1的选项并让2出现在这个地方。我该怎么办呢。

Answer 1

您可以执行以下操作：

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

这将从选择中删除所有选项并添加2个新选项。