如何動態地選擇動態添加選擇/選項標籤

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。不需要做進一步的事情。