个人中心
gpt4 book ai didi

javascript - 如何在javascript中为下拉所选项目生成具有唯一id、名称的动态标签和输入字段？

转载 作者：行者123 更新时间：2023-12-01 00:23:14 24 4
gpt4 key购买 nike

当从下拉列表中单击时，我面临着创建动态标签和输入字段的问题，每个输入具有唯一的 ID 和唯一的名称我们如何取消选中下拉列表或单击所选项目的删除按钮时。

任何帮助将不胜感激。提前致谢

如果从下拉列表中选择了两个项目，即[发票城市]和[发票日期]，则标签和输入字段都应使用具有删除按钮的唯一 ID** 创建，以便在删除按钮时从下拉列表中取消选中该项目单击选择项目

var options = [{
    "text": "New 1",
    "value": "[Invoice city]"
  },
  {
    "text": "New 2",
    "value": "[Invoice Date]"
  },
  {
    "text": "Ocv 3",
    "value": "val 3"
  },
  {
    "text": "Option 4",
    "value": "Value 4"
  },
  {
    "text": "Option 5",
    "value": "Value 5"
  }
];
var selectBox = document.getElementById('multichecks');

for (var i = 0, l = options.length; i < l; i++) {
  var option = options[i];
  selectBox.options.add(new Option(option.text, option.value, option.selected));
}


$(document).ready(function() {
	function generate(option){
  var ops = $('#multichecks option:selected');
        var selected = [];
        $(ops).each(function() {
          selected.push([$(this).val()]);
        });
        $('#dvContainer').html('');

        $(selected).each(function(index, ops) {
          if (ops){
            $('#dvContainer').html($('#dvContainer').html() +'<div><label id="lbl'+ops+'"> '+ops+':</label><input type="text" id="txt'+ops+'" /><button class="bgen" id="btn'+ops+'">X</button></div>');
          }
        });
  }
  function textinside(option){
  var ops = $('#multichecks option:selected');
        var selected = [];
        $(ops).each(function() {
          selected.push([$(this).val()]);
        });
        $('#9MMM').html('');

        $(selected).each(function(index, ops) {
          if (ops){
            $('#9MMM').html($('#9MMM').html() +'<label class = "custom_label_div2" id="lbl'+ops+'"> '+ops+'; </label>');
          }
        });
  }
  $('#multichecks').multiselect({
      nonSelectedText: 'Check an option!',
      maxHeight: 200,
      numberDisplayed: 2,
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      includeSelectAllOption: true,
      selectAllText: 'Check all!',
      onChange: function (option) {
        textinside(option);
        generate(option)
      },
      onSelectAll: function() {
        textinside(option);
        generate(option)
      }
  });
  $(document).on('click', '.bgen', function() {
    $(this).parent().remove();
    var str = this.id.replace("btn","");
    $("#multichecks").multiselect('deselect', str);
  });
});
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
  <link rel="stylesheet" href = "new.css" >
  </head>

  <body>
<!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> style="border:1px solid gray; width:150px;" -->

<hr />
<div class="box" id="box4">
  <h2> STEP 4 </h2>
  <strong>Where Condition :</strong>
  <div class="UZI" id="9MM" >
    <select id="multichecks" multiple="multiple"></select>
  </div>
  <hr />
  <strong>Selected Columns :</strong>
  <div class = "VSS" id = "9MMM" style="border:1px solid gray; width:150px;" >
  </div>
  <hr />
  <div class = "inputBox" id="dvContainer"></div>
  <hr/>
</div>

最佳答案

您可以使用您的 ID 添加选择选项值以使其唯一。并确保在 onChange 和 onSelectAll 方法中添加动态 html。

var options = [{
    "text": "New 1",
    "value": "[Invoice city]"
  },
  {
    "text": "New 2",
    "value": "[Invoice Date]"
  },
  {
    "text": "Ocv 3",
    "value": "val 3"
  },
  {
    "text": "Option 4",
    "value": "Value 4"
  },
  {
    "text": "Option 5",
    "value": "Value 5"
  }
];
var selectBox = document.getElementById('multichecks');

for (var i = 0, l = options.length; i < l; i++) {
  var option = options[i];
  selectBox.options.add(new Option(option.text, option.value, option.selected));
}


$(document).ready(function() {
	function generate(option){
  var ops = $('#multichecks option:selected');
        var selected = [];
        $(ops).each(function() {
          selected.push([$(this).val()]);
        });
        $('#dvContainer').html('');

        $(selected).each(function(index, ops) {
          if ("[Invoice city]" == ops || "[Invoice Date]" == ops){
            $('#dvContainer').html($('#dvContainer').html() +'<div><label id="lbl'+ops+'">Label for '+ops+':</label><input type="text" id="txt'+ops+'" /><button class="bgen" id="btn'+ops+'">X</button></div>');
          }
        });
  }
  $('#multichecks').multiselect({
      nonSelectedText: 'Check an option!',
      maxHeight: 200,
      numberDisplayed: 2,
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      includeSelectAllOption: true,
      selectAllText: 'Check all!',
      onChange: function (option) {
        generate(option);
      },
      onSelectAll: function() {
        generate(option);
      }
  });
  $(document).on('click', '.bgen', function() {
    $(this).parent().remove();
    var str = this.id.replace("btn","");
    $("#multichecks").multiselect('deselect', str);
  });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
</head>

<body>
  <!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> -->

  <hr />
  <div class="" id="">
    <strong>Where Condition :</strong>
    <div class="newa" id="newq">
      <select id="multichecks" multiple="multiple" onclick="test();"></select>
    </div>
    <hr />
    <div id="dvContainer"></div>
    <hr/>
  </div>

关于javascript - 如何在javascript中为下拉所选项目生成具有唯一id、名称的动态标签和输入字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59234344/

24 4 0
文章推荐： javascript - 为什么调用此函数时输出未定义？
文章推荐： javascript - 从对象数组动态构建二维数组
文章推荐： javascript - 动态改变js文件的src
文章推荐： javascript - Spark AR 为什么 if-else if 构造不起作用？
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com