如何使用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函数时获得选择标签

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

这就是我为你做的。

​

 $(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();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add_row">Add row !</button>
<table class="rowContainer"></table>

​

Answer 3

我建议您在事件回调中分隔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的选择器官方文档：https://api.jquery.com/category/selectors/

和jQuery的Append：http://api.jquery.com/append/

希望能有所帮助