动态添加通过json创建的选择项

这是因为你有一个拼写错误，请格式化你的代码，然后决定是否需要提问。

var mappings = [{"#"+id+"2":0},{"#"+id+"3":1},{"#"+id+"4":2},{"#"+id+5":3}];//getting error in this line 

格式化代码

var mappings = [
    {"#"+id+"2":0},
    {"#"+id+"3":1},
    {"#"+id+"4":2},
    {"#"+id+5":3}   // <- Do you see the error now?
];

固定

var mappings = [
    {"#"+id+"2":0},
    {"#"+id+"3":1},
    {"#"+id+"4":2},
    {"#"+id+"5":3}   // <- Fixed, you need to add the opening quote before the '5'.
];

我用叉子叉了你的JSFiddle，把它清理了一下：JSFiddle.net/b55ykec

更新

您需要构建映射，因为您无法生成与对象定义一致的动态密钥：

var mappings = [2, 3, 4, 5].reduce(function(map, val, index) {
    var key = '#' + id + val;
    map[key] = index;
    return map;
}, {});
var selected = jsonObj[newKey];
$.each(mappings, function (selector, index) {
    $(selector).empty().append(getOpts(selected[index]));
});

有些更改需要更改才能使代码正常工作。以下所有更改都是为了使底部的工作示例起作用。

• 我将所有内联样式移到了样式表中。您有许多相同的价值观，因此整合可以帮助您在未来更好地管理
• 我将customFields更改为custom-fields。CSS类名和ID不应该是camelcase。单词通常用连字符分隔。这听起来可能有些迂腐，但它可以帮助您避免将它们与JavaScript变量混淆
• 我把x移到了全球范围。x是一个静态值，每次添加新行时都应自动递增
• 您为每个动态行添加了两个"select4"ID。我把第二个改为"select5"

• 您生成的ID不够唯一，我添加了一个短划线来分隔列。

  '<select name ="hons[]" id="' + 'select1-' + x + '">'
  

• 为了让所有新的选择框都能侦听更改事件，您需要将侦听器添加到父容器中，并侦听子容器上的更改。

  $('#custom-fields').on('change', 'select[id^="select1-"]', updateSelect);
  

工作示例

var x = 1;
$(document).ready(function() {
  $(".addCF").click(function() {
    $("#custom-fields").append([
      '<tr>',
      '<td class="tg-30rh">',
      '<select name ="hons[]" id="' + 'select1-' + x + '">',
      '<option value="Hindi">Hindi</option>',
      '<option value="Bengali">Bengali</option>',
      '<option value="English">English</option>',
      '</select> ',
      '<select id="ddl2" name="session[]"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<select name="sub1[]" id="select2-' + x + '"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<select name="sub2[]" id="select3-' + x + '"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<select name="sub3[]" id="select4-' + x + '"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<select name="sub4[]" id="select5-' + x + '"></select>',
      '</td>',
      '<td class="tg-30rh">',
      '<input type="text" name="tran_id[]" />',
      '</td>',
      '<td class ="tg-30rh">',
      '<input type="text" name="tran_date[]" />',
      '</td>',
      '<td>',
      '<a href="javascript:void(0);" class="remCF">Remove</a>',
      '</td>',
      '</tr>'
    ].join(''));
    $('#select1-' + x).trigger('change');
    x++;
  });
  $("#custom-fields").on('click', '.remCF', function() {
    $(this).parent().parent().remove();
  });
});
var jsonObj = {
  "Hindi": [
    ["History", "Sociology", "Economics"], "Philosophy", "Political Science", "English"
  ],
  "Bengali": [
    ["History", "Sociology"], "Sanskrit", "Philosophy", "Political Science"
  ],
  "English": [
    ["History", "Sociology", "Economics"], "Philosophy", "Political Science", ["Bengali", "Hindi"]
  ],
  "History ": ["Philosophy", " Political Science", ["Bengali", " Hindi"], " English"],
  "Political Science": [
    [" History ", " Sociology", " Economics"], "Philosophy", ["Bengali ", " Hindi"], "English"
  ],
  "Philosophy": [
    [" History", " Sociology"], " Sanskrit", "Political Science", ["Bengali", "Hindi"]
  ]
};
function updateSelect(e) {
  var targetId = e.target.id;
  var id = parseInt(targetId.match(/['w'd]+'-('d+)$/)[1], 10);
  var getOpts = function(raw) {
    raw = Array.isArray(raw) ? raw : [raw, ''];
    return raw.map(function(obj) {
      return new Option(obj, obj);
    });
  };
  var newKey = $('#select1-' + id).val();
  var mappings = [2, 3, 4, 5].reduce(function(map, val, index) {
    var key = '#select' + val + '-' + id;
    map[key] = index;
    return map;
  }, {});
  var selected = jsonObj[newKey];
  $.each(mappings, function (selector, index) {
    $(selector).empty().append(getOpts(selected[index]));
  });
}
$(document).ready(function() {
  $('#custom-fields').on('change', 'select[id^="select1-"]', updateSelect);     
  $('#select1-0').trigger('change'); // For initial page load.
});

.col-wide {
  width: 222px;
}
.col-narrow {
  width: 216px;
}
.col-normal {
  width: 219px;
}
#custom-fields {
  table-layout: fixed;
  width: 657px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4> Honours Selection</h4> 
<table class="tg" id="custom-fields">
  <colgroup>
    <col class="col-wide" />
    <col class="col-narrow" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
    <col class="col-normal" />
  </colgroup>
  <tr>
    <th class="tg-hgcj" rowspan="2">
      <br />Honours
    </th>
    <th class="tg-hgcj" colspan="4">General</th>
    <th class="tg-hgcj" colspan="2">Bank Transaction Details</th>
    <th class="tg-hgcj" rowspan="2">Add More</th>
  </tr>
  <tr>
    <td class="tg-093g">Sub1</td>
    <td class="tg-093g">Sub2</td>
    <td class="tg-093g">Sub3</td>
    <td class="tg-093g">Sub4</td>
    <td class="tg-093g">Bank Transaction id</td>
    <td class="tg-093g">Bank Transaction date</td>
  </tr>
  <tr>
    <td class="tg-30rh">
      <select name="hons[]" id="select1-0" onchange="">
        <option value="Hindi">Hindi</option>
        <option value="Bengali">Bengali</option>
        <option value="English">English</option>
      </select>
      <select id="ddl2" name="session[]">
      </select>
    </td>
    <td class="tg-30rh">
      <select name="sub1[]" id="select2-0">
      </select>
    </td>
    <td class="tg-30rh">
      <select name="sub2[]" id="select3-0">
      </select>
    </td>
    <td class="tg-30rh">
      <select name="sub3[]" id="select4-0">
      </select>
    </td>
    <td class="tg-30rh">
      <select name="sub4[]" id="select5-0">
      </select>
    </td>
    <td class="tg-30rh">
      <input type="text" name="tran_id[]" />
    </td>
    <td class="tg-30rh">
      <input type="text" name="tran_date[]" />
    </td>
    <td><a href="javascript:void(0);" class="addCF">Add</a>
    </td>
  </tr>
</table>

不能将表达式作为属性名称。

更新：

试试这样的东西：

var mappings = [];
["#"+id+"2","#"+id+"3","#"+id+"4","#"+id+"5"].forEach(function(e,i) {
    var o = {};
    o[e] = i;
    mappings.push(o);
});