如何使用select option jquery函数

Question

我不是一个UI开发人员，但我正在研究javascript，我编写了一个代码，其中每行都被添加，但我想在新创建的行中添加一个select选项。

下面是代码

 $(document).ready(function(){
  var i=1;
 $("#add_row").click(function(){
  $('#addr'+i).html("</td><td><input name='name"+i+"' type='text' placeholder='FIELD' class='form-control input-md'  /> </td> <select name='TYPE' ><option value='ORANGE'>ORANGE</option><option value='YELLOW'>YELLOW</option><option value='GREEN'>GREEN</option></select> <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>")});

我们可以修改它吗，我想在每次调用#add_row函数时得到Select标记

Answer 1

我无法清楚地知道你想要什么。但我为你创造了一个fiddle。

 $(document).ready(function(){
  var i=1;
  $("#add_row").click(function(){
    $('#addr').append("<tr><td><input name='name"+i+"' type='text' placeholder='FIELD' class='form-control input-md'  /> </td><td> <select name='TYPE' ><option value='ORANGE'>ORANGE</option><option value='YELLOW'>YELLOW</option><option value='GREEN'>GREEN</option></select> <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>")
    i++;
   });
});

HTML就像

<button id="add_row">Add row</button>
<table id="addr"></table>

Answer 2

我建议你在事件回调中将HTML分开，以便轻松处理每一列及其数据。

我在我的例子中使用jQuery的Append和Selectors功能。

工作示例，看看：

// Waiti the DOM LOAD
$(document).ready(function(){
    // Setting the first row ID as 1
    var row_ID = 1;
	
    // Handle the button click event
    $("#add_row").click(function(){
      
        // Setting some templates to separate yout HTMLs
        var col_1_template = "<td><input name='name" + row_ID + "' type='text' placeholder='FIELD' class='form-control input-md'  /></td>";
        var col_2_template = "<td><select name='TYPE" + row_ID + "' ><option value='ORANGE'>ORANGE</option><option value='YELLOW'>YELLOW</option><option value='GREEN'>GREEN</option></select> <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>";
      
        // Insertint an empty line
        $('#your_table_ID').append("<tr></tr>");
      
        // Get the new line
        var actual_line = $('#your_table_ID tr:last');
      
        // Appending each column
        actual_line.append(col_1_template)
        actual_line.append(col_2_template);
      
        // Rows count
        row_ID++;
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add_row">+</button>
<table id="your_table_ID"></table>

jQuery Selectors官方文档：qazxsw poi

和jQuery的追加：https://api.jquery.com/category/selectors/

希望能帮助到你

Answer 3

这就是我为你所做的。

http://api.jquery.com/append/

 $(document).ready(function(){
 $("#add_row").click(function(){
 	var totalRows = $('.row').length, nextI = totalRows + 1;
  $('.rowContainer').append("<tr class='row'><td><input name='name_" +nextI+ "' type='text' placeholder='FIELD' class='form-control input-md' /><select name='TYPE'><option value='ORANGE'>ORANGE</option><option value='YELLOW'>YELLOW</option><option value='GREEN'>GREEN</option></select></td><td class='deleterow'><div class='glyphicon glyphicon-remove'>X</div></td></tr>");
  });
  $(document).on('click', ".glyphicon-remove", function() {
		$(this).closest('.row').remove();
  });
});