如何使用选择选项jQuery函数

我不是UI开发人员，但我做R于JavaScript的& d，我已经写了其中获取添加的每一行代码，但我想在新增加一个选择选项创建行。如何使用选择选项jQuery函数

下面是代码

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

我们可以修改这一点，我想选择标签，当我打电话，每次

来源

2016-09-13 Ganesh

我无法得到明确你想要什么#add_row工作。但我为你创建了一个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>

来源

2016-09-13 18:05:02

这是我需要的:) – Ganesh

@Ganesh请注明的答案是正确的，如果这就是你所需要的（点击旁边的答案复选标记）。 –

下面就是我为你做。

$(document).ready(function(){ 
 
$("#add_row").click(function(){ 
 
    \t 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() { 
 
\t \t $(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>

来源

2016-09-13 18:18:57

@Ganesh：嗨，你能告诉我我的答案是否正确？谢谢 –

我建议你分开你的HTML事件回调轻松处理每列和它的数据。

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

工作例子，我们来看一看：

// Waiti the DOM LOAD 
 
$(document).ready(function(){ 
 
    // Setting the first row ID as 1 
 
    var row_ID = 1; 
 
\t 
 
    // 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的追加： http://api.jquery.com/append/

希望它可以帮助

来源

2016-09-13 18:22:43 RPichioli

回答

相关问题