2015-11-23 7 views
1

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 выбран по умолчанию

ответ

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>. Не нужно ничего делать дальше.

+0

Спасибо! это сработало для меня с созданием уникальных идентификаторов. – user

Смежные вопросы