Jquery：克隆选择列表并按其值选择选项答案

【问题标题】：Jquery: Cloning a select list and selecting an option by its valueJquery：克隆选择列表并按其值选择选项
【发布时间】：2011-01-08 18:47:55
【问题描述】：

我正在尝试使用 jQuery 将选择选项列表附加到 div 表中，完成此操作后，我想选择列表中的特定选项，我正在尝试这样的事情：

// my hidden option list
<div style="display:none;">
<select class="option_list">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="none">Unknown</option>
</select>
</div>

<div id="my_table">
    <div>
        <div>John</div>
        <div>25</div>
        <div></div>
    </div>
    <div>
        <div>Emy</div>
        <div>22</div>
        <div></div>
    </div>
    <div>
        <div>Sarah</div>
        <div>28</div>
        <div></div>
    </div>
</div>

// $(".option_list") is hidden in HTML page, I clone and append it to my div table row
$(".option_list")
      .clone ()
      .appendTo ("#my_table > div > div:last-child")
      .attr ("name", "a_dynamic_name_for_php_form")
      .find ("option[value=none]").selected = true;

【问题讨论】：

标签： jquery attributes jquery-selectors html-manipulation

【解决方案1】：

你应该写.val('none')。 val 方法将找到带有 value 的 <option>。（或者，失败了，那个文本）

【讨论】：

我已经尝试过了，但似乎将所有选项都设置为“无”
您当然需要在 select 元素上这样做，而不是在所有 option 元素上。

【解决方案2】：

试试这个：

$(".option_list")
  .clone ()
  .appendTo ("#my_table > div > div:last-child")
  .attr ("name", "a_dynamic_name_for_php_form")
  .find ("option[value=none]").attr("selected", "true");

注意最后一行的变化。

【讨论】：

【解决方案3】：

为什么要克隆它？尽可能简单，我会将隐藏的 html 部分定义为字符串并简单地附加它们：

var add = '<select>' +
          '  <option value="one">one</option>' +
          '  <option two ... '+
          '</select>';
$(something).appendTo(add);

有点脏，但是... :) - （你甚至可以用 asp/php 定义那些隐藏的部分，所以你不必写每一行）

编辑：已经回答...

【讨论】：