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

标签 javascript jquery json

我必须使用 json 数组的选择值动态创建表行 该行已添加到行中，但当我尝试将选择的 id 与该调用函数连接起来时，其他下拉列表在以下代码中不起作用，我收到错误。我附加了 jsfiddle 的链接，其中我仅在选择下拉列表点头添加额外字段时才出现错误 here .如何解决错误以获得与链接相同的效果。

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

</head>
<body>

<h4> Honours Selection</h4>  
<table class="tg" style="undefined;table-layout: fixed; width: 657px"  id="customFields" >
<colgroup>
<col style="width: 222px">
<col style="width: 216px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
<col style="width: 219px">
</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"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">
              </select>
</td>
<td class="tg-30rh"><select name="sub2[]"id="select3">
</select></td>
<td class="tg-30rh"><select name="sub3[]"id="select4">
</select></td>
<td class="tg-30rh"><select name="sub4[]"id="select5">
</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>

</body>
</html>
<script>

    $(document).ready(function(){var x=2;
    $(".addCF").click(function(){
        $("#customFields").append('<tr>\
    <td class="tg-30rh"><select name ="hons[]" id='+'select1'+x+' onchange="updateSelect(this.id);">\
    <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='+'select4'+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>');x++;
    });
    $("#customFields").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(id) {
    //alert("#"+id+"1");
    var getOpts = function(raw){
        var values = raw;
        if (!(raw instanceof Array)){
            values = [raw, ""];
        }
        var result = [];
        values.forEach(function(obj){
            result.push(new Option(obj, obj));
        });
        return result;
    };


    var newKey = $("#"+id+"1").val();
    var mappings = [{"#"+id+"2":0},{"#"+id+"3":1},{"#"+id+"4":2},{"#"+id+"5":3}];//getting error in this line SyntaxError: missing : after property id var mappings = [{"#"+id+"2":0},{"#"+id+"3":1}, {"#"+id+"4":2},//{"#"+id+"5":3} ]; near +

    var selected = jsonObj[newKey];

    mappings.forEach(function(mapping){
        var selector = Object.keys(mapping)[0];
        var index = mapping[selector];
        $(selector).empty();
        var opts = getOpts(selected[index]);
        $(selector).append(opts);
    });

}

$(document).ready(function() { 
    $("#select1").change(updateSelect);
    updateSelect(); // For initial page load.
});
</script>

最佳答案

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

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'.
];

我 fork 了你的 JSFiddle 并对其进行了一些清理:jsfiddle.net/b55bykec

更新

您需要构建映射，因为您无法生成与对象定义内联的动态键:

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]));
});

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

  • 我将所有内联样式移至样式表。你们有许多相同的值(value)观，因此整合可以帮助您在未来更好地管理。
  • 我将 customFields 更改为 custom-fields。 CSS 类名和 ID 不应采用驼峰命名法。单词通常用连字符分隔。这可能听起来很迂腐，但它可以帮助您避免将它们与 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>

关于javascript - 动态添加通过 json 创建的选择项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29536283/

上一篇：javascript - 如何使用 Node.js 和 eclipse 将 mongodb 数据发送到浏览器

下一篇：javascript - 如何在 Analytics.js 中始终了解最新的 cookie 过期时间

相关文章：

javascript - 如何对JSON的相似子项进行分组

javascript - 如何创建一个具有多种状态的按钮？

javascript - 使用 React Native 检测应用程序终止

javascript - track.stop 不再关闭相机

javascript - 显示 HTML 元素正在 AJAX 加载的最简单/最好的方法是什么？

mysql - 试图将 MySQL 数据放入 d3 的嵌套 json 文件中？

c# - 使用 C# 读取发布数据

javascript - 如何在javascript中将json格式的字符串转换为json数组

javascript - 如何处理这个 json 结构

json - 从 CSV 文件创建 JSON 多维数组

©2024 IT工具网  联系我们