如何动态地选择动态添加选择/选项标签

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

实施例：

• 在ROW1 - 我想有选项＃1至默认
• 被选择在ROW2 - 我想选择＃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>

注意，<select>元素上设置val()需要在<option>护理selected。不需要做进一步的事情。