[英]jquery add table row with json data in dropdowns
我有一個帶有表格的Web表單,用戶可以向其中添加其他行。 該表的第一行包含相關的下拉列表。 下拉列表中填充了來自引用文件的json數據。 我正在使用的代碼如下:
//the add row function
$(function(){
var newgroup = $('<tr>').addClass('rec-rows');
$('#addRow').click(function(e){
e.preventDefault();
$('.rec-rows').first().clone().appendTo(newgroup).appendTo('#details'); });
});
//onChange function
$(".rec-rows #section").live('change',function(){
var sSec =$(this).parent().find('#section').val();
$("#divParts").hide();
$("#divDesc").hide();
$("#divGroup").hide();
if(sSec=="select") {
$("#divCategory").hide();
} else {
$.getJSON("static/site_category.json", function(json) {
var catJson = json[sSec];
var options = "<option value=\"select\">Select Area Type</option>";
for(i=0;i<catJson.length;i++) {
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"
}
理論上,將添加新行,並且我粘貼的onChange代碼將對其他每行起作用。 但是,結果根本不是這樣。 相反,當添加行並且用戶在新行上進行選擇時,值將在第一行中更新。表的第一部分如下所示:
<td width="" align="left">
<div>
<select id="section" name="section" style="margin-top:15px;">
<option value="select">Select Area</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
</td>
我感謝任何幫助使此代碼按預期工作的方法-這將是一個簡單的添加行,其中下拉選擇僅在找到它們的行上更新。 謝謝。
您可以在這里查看我的答案,即如何在表的開頭動態添加行:
這可能對您有幫助。
或者我也看到一個問題。
更改$(“#section”)。change(
至:
$("#section").live('change',...
這可能就是為什么新的下拉菜單不起作用的原因
得到了解決方案! 建議在以下情況下聲明父項:
$(".section").change( function () {
var sSec =$(this).val();
context = $(this).parents("tr");
if(sSec=="select") {
$("#divCategory", context).hide();
} else {
$.getJSON("static/site_category.json", function(json) {
var catJson = json[sSec];
var options = "<option value=\"select\">Select Area Type</option>";
for(i=0;i<catJson.length;i++) {
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"
現在,對於每一次“添加行”單擊,都會添加一行,並且在用戶選擇該行(僅該行)時,下拉列表也會更改。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.