javascript - 如何动态选择动态添加的选择/选项标签的选项

Question

HTML 代码:

<table id="test">
     <thead>
         <tr>
             <th>col1</th>
             <th>col2</th>
             <th>col3 </th>
         </tr>
     </thead>
     <tbody id="test1">
     </tbody>
  </table>

Javascript:

    function addData() {
      $.get('ServletCall', {}, function(Servresponse) {
        $.each(Servresponse, function(key, val) {
          var row = "<tr>";
          row += "<td>" + val.col1 + "</td>";
          row += "<td>" + val.col2 + "</td>";
          row += "<td>" +
            "<select id='dropdown'>\n\
                                    <option value='num1'>1</option>\n\
                                    <option value='num2'>2</option>\n\
                                    <option value='num3'>3</option>\n\
                            </select>" + "</td>";
          row += "</tr>";
          $("#test1").append(row);
          $('#dropdown', row).val(val.number).prop("selected", true);
        });
      });
    }

此行不起作用:

$('#dropdown',row).val(val.number).prop("selected", true) ;

默认情况下它始终显示选项#1

示例:

• 在第 1 行中 - 我希望默认选择选项#1
• 在第 2 行中 - 我希望默认选择选项#3

Answer 1

id s 必须是唯一的，但除此之外 - 您在将 HTML 文本附加到文档后中进行搜索。此时您对文本所做的任何操作都不会产生任何效果。

首先获取一个 jQuery 对象，然后在该对象中搜索:

val = {
  number: 'num2',
  col1: "col 1",
  col2: "col 2"
};

var row = "<tr>";
row += "<td>" + val.col1 + "</td>";
row += "<td>" + val.col2 + "</td>";
row += "<td>" +
  "<select class='dropdown'>\n\
                                <option value='num1'>1</option>\n\
                                <option value='num2'>2</option>\n\
                                <option value='num3'>3</option>\n\
                        </select>" + "</td>";
row += "</tr>";
var jrow = $(row).appendTo($('#test1'));

jrow.find('.dropdown').val(val.number);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=test1>
</div>

请注意设置 val()关于<select>元素照顾 selected关于<option> 。无需进一步执行任何操作。