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

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

转载作者：行者123 更新时间：2023-12-03 10:23:13

我必须使用 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 - 诗农 stub 未被调用

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城