javascript - jquery 的 val() 未设置 'selected' 属性

Question

我正在使用 jquery 在表中创建选择选项字段。但由于未知原因，我无法设置所选选项。

在下面的示例中，有四个选择选项，只有最后一个选择了正确的选项。谁能告诉我我的代码有什么问题吗？

编辑:
我改为代码片段。现在我们有 3 个例子:
1) 我发布的原始示例。 val() 仅适用于第二个选择选项
2) 与 1 相同，但附加到 DOM 是通过 ID 而不是类完成的。这里只有第二个选择选项设置正确
3) 选择选项是在 HTML 中定义的。 val()用于选择选项2。这里工作正常。

问题:
1)为什么在示例1中，只有第二个选择选项设置正确
2) 为什么在示例 2 中，第一个选择选项根本不渲染。

我知道解决方法是通过在“option”元素上设置属性“selected”来选择正确的选项，但在我看来，方法 val() 的行为并不一致，我想了解原因。也许我没有按照设计使用它，但到目前为止还不能这么说。

//example 1
$('<select />')
.append($('<option/>', { value: "1" }).text("first option"))
.append($('<option/>', { value: "2" }).text("second option"))
.append($('<option/>', { value: "3" }).text("third option"))
.val("2")
.appendTo($('.td1'));

//example 2
$('<select />')
.append($('<option/>', { value: "1" }).text("first option"))
.append($('<option/>', { value: "2" }).text("second option"))
.append($('<option/>', { value: "3" }).text("third option"))
.val("2")
.appendTo($('#td21'))
.appendTo($('#td22'));
//example 3
$('.td3 select').val("2");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th title="val() works only on last rendered element">Example 1</th>
      <th title="val() works, but only one element is rendered at all">Example 2</th>
      <th title="val() works OK!">Example 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="td1"></td>
      <td class="td2" id="td21"></td>
      <td class="td3">
        <select class="select3">
          <option value="1">first option</option>
          <option value="2">second option</option>
          <option value="3">third option</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="td1"></td>
      <td class="td2" id="td22"></td>
      <td class="td3">
        <select class="select3">
          <option value="1">first option</option>
          <option value="2">second option</option>
          <option value="3">third option</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以通过为其指定属性 selected 来预选择一个选项，如下所示:

.append($('<option/>', {
    value: "2",
    selected: true
})

$('<select />')
  .append($('<option/>', {
    value: "1"
  }).text("first option"))
  .append($('<option/>', {
    value: "2",
    selected: true
  }).text("second option"))
  .append($('<option/>', {
    value: "3"
  }).text("third option"))
  .appendTo($('.col2'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<TABLE>
  <TBODY>
    <TR DATA-INDEX='1'>
      <TD>11</TD>
      <TD class='col2'>12</TD>
      <TD>13</TD>
      <TD class='col4'>14</TD>
    </TR>
    <TR DATA-INDEX='2'>
      <TD>21</TD>
      <TD class='col2'>22</TD>
      <TD>23</TD>
      <TD class='col4'>24</TD>
    </TR>
    <TR DATA-INDEX='3'>
      <TD>31</TD>
      <TD class='col2'>32</TD>
      <TD>33</TD>
      <TD class='col4'>34</TD>
    </TR>
    <TR DATA-INDEX='4'>
      <TD>41</TD>
      <TD class='col2'>42</TD>
      <TD>43</TD>
      <TD class='col4'>44</TD>
    </TR>
  </TBODY>
</TABLE>

或者您可以在事后选择您的选项，如下所示:

.find('option[value="2"]').prop('selected',true‌​)

$('<select />')
      .append($('<option/>', {
        value: "1"
      }).text("first option"))
      .append($('<option/>', {
        value: "2"
      }).text("second option"))
      .append($('<option/>', {
        value: "3"
      }).text("third option"))
      .appendTo($('.col2'))
      .find('option[value="2"]').prop('selected',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<TABLE>
  <TBODY>
    <TR DATA-INDEX='1'>
      <TD>11</TD>
      <TD class='col2'>12</TD>
      <TD>13</TD>
      <TD class='col4'>14</TD>
    </TR>
    <TR DATA-INDEX='2'>
      <TD>21</TD>
      <TD class='col2'>22</TD>
      <TD>23</TD>
      <TD class='col4'>24</TD>
    </TR>
    <TR DATA-INDEX='3'>
      <TD>31</TD>
      <TD class='col2'>32</TD>
      <TD>33</TD>
      <TD class='col4'>34</TD>
    </TR>
    <TR DATA-INDEX='4'>
      <TD>41</TD>
      <TD class='col2'>42</TD>
      <TD>43</TD>
      <TD class='col4'>44</TD>
    </TR>
  </TBODY>
</TABLE>