Question

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

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

修改
我改为代码片段。现在我们有3个例子：
1）我发布的原始示例。 val（）仅适用于第二个选择选项
2）与1相同，但是附加到DOM是由ID而不是类完成的。此处仅正确设置了第二个选择选项 3）选择选项在HTML中定义。 val（）用于选择选项2.这里工作正常。

问题：
1）为什么在示例1中，只有正确设置了第二个选择选项 2）为什么在exmpale 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>

jquery的val（）没有设置'selected'属性

1 个答案: