如何在点击时复制包含许多脚本的 div答案

【问题标题】：How can copy div including many scripts onclick如何在点击时复制包含许多脚本的 div
【发布时间】：2019-08-29 17:07:20
【问题描述】：

我的网页包括许多选择选项和描述框我希望当用户按下（添加新）按钮时打开新的 div 并使用相同的选择和描述框完全相同但我的问题是选择包括脚本代码..当我把它放入函数 addrow() 不起作用

因此，当用户按下按钮时，我如何以相同的方式复制相同的选择来工作广告（添加新的）请帮帮我

<html>
<select name="marklocation" id="type" style="width: 42%">
    <option value="">- Location -</option>
    <option value="Runway 17">Runway 17</option>
    <option value="Runway 35">Runway 35</option>
    <option value="Runway 18">Runway 18</option>
    <option value="Runway 36">Runway 36</option>
</select><br/>
<select name="markingtype" id="size" style="width: 42%">
    <option value="">-- Marking Type -- </option>
</select><br/>
<script>
$('#type').on('change', function(e) {
      let selector = $(this).val();
      $("#site > option").hide();
      var val = $(this).val();
        if (val == "Runway 17") {
            $("#size").html("<option value='t'>- Marking Runway Types -</option><option value='Runway Designator Marking'>Runway Designator Marking </option><option value='Runway Centerline Marking'>Runway Centerline Marking</option><option value='Runway Threshold Marking'>Runway Threshold Marking</option><option value='Runway Side Strip Marking'>Runway Side Strip Marking</option><option value='Runway Aiming Point Marking'>Runway Aiming Point Marking</option><option value='Runway Touchdown Zone Marking'>Runway Touchdown Zone Marking</option><option value='Runway Displaced Threshold Marking'>Runway Displaced Threshold Marking</option><option value='Chevron Markings For Stopway'>Chevron Markings For Stopway</option>");
        } else if (val == "Runway 35") {
            $("#size").html("<option value='t'>- Marking Runway Types -</option><option value='Runway Designator Marking'>Runway Designator Marking </option><option value='Runway Centerline Marking'>Runway Centerline Marking</option><option value='Runway Threshold Marking'>Runway Threshold Marking</option><option value='Runway Side Strip Marking'>Runway Side Strip Marking</option><option value='Runway Aiming Point Marking'>Runway Aiming Point Marking</option><option value='Runway Touchdown Zone Marking'>Runway Touchdown Zone Marking</option><option value='Runway Displaced Threshold Marking'>Runway Displaced Threshold Marking</option><option value='Chevron Markings For Stopway'>Chevron Markings For Stopway</option>");
        } else if (val == "Runway 18") {
            $("#size").html("<option value='t'>- Marking Runway Types -</option><option value='Runway Designator Marking'>Runway Designator Marking </option><option value='Runway Centerline Marking'>Runway Centerline Marking</option><option value='Runway Threshold Marking'>Runway Threshold Marking</option><option value='Runway Side Strip Marking'>Runway Side Strip Marking</option><option value='Runway Aiming Point Marking'>Runway Aiming Point Marking</option><option value='Runway Touchdown Zone Marking'>Runway Touchdown Zone Marking</option><option value='Runway Displaced Threshold Marking'>Runway Displaced Threshold Marking</option><option value='Chevron Markings For Stopway'>Chevron Markings For Stopway</option>");
        } else if (val == "Runway 36") {
            $("#size").html("<option value='t'>- Marking Runway Types -</option><option value='Runway Designator Marking'>Runway Designator Marking </option><option value='Runway Centerline Marking'>Runway Centerline Marking</option><option value='Runway Threshold Marking'>Runway Threshold Marking</option><option value='Runway Side Strip Marking'>Runway Side Strip Marking</option><option value='Runway Aiming Point Marking'>Runway Aiming Point Marking</option><option value='Runway Touchdown Zone Marking'>Runway Touchdown Zone Marking</option><option value='Runway Displaced Threshold Marking'>Runway Displaced Threshold Marking</option><option value='Chevron Markings For Stopway'>Chevron Markings For Stopway</option>");
        }
});
</script>
<select name="tdmPassport" id="tdmPassport" style="width: 42%" class="auto-style2" onchange = "ShowHidDiv()">
                                        <option value="">- Marking Condition -</option>
                                        <option value="Good:Accepted Level"  style="background-color: #29BB29">Good</option>
                                        <option value="Medium:Maintenance Plan Level"  style="background-color: yellow">Medium</option>
                                        <option value="Poor:Corrective Action Level"  style="background-color: #FE4E4E">Poor</option>
                                    </select><br> 
<p class="auto-style3">Maintenance Plan:</p>  
                                   <textarea name="markingplan" id="planmark" style="width: 572px; height: 129px" ></textarea><br>

<input type="button" value="Add new" onclick="addRowr()"><br>
<div id="contentr">
  </div>
<script>
function addRowr () {
  document.querySelector('#contentr').insertAdjacentHTML('afterbegin',
    `<div><input type="button" value="remove" onclick="removeRow(this)"><br>
    <select name="marklocation" id="type" style="width: 42%">
    <option value="">- Location -</option>
    <option value="Runway 17">Runway 17</option>
    <option value="Runway 35">Runway 35</option>
    <option value="Runway 18">Runway 18</option>
    <option value="Runway 36">Runway 36</option>
</select><br/>
<select name="markingtype" id="size" style="width: 42%">
    <option value="">-- Marking Type -- </option>
</select><br/>

   <input type="button" value="Add" onclick="addRowr()"><br>
    </div>`      
  )
}
function removeRowr (inputr) {
  inputr.parentNode.remove()
}   
</script>
</html>

【问题讨论】：

将 id 更改为 class 应该是一个起点。

标签： javascript jquery html

【解决方案1】：

我做了一些更改以改进代码，使其更易于阅读和维护。

为输入元素名称提供方括号，以便它们在表单提交时作为数组发布
在每一行周围添加一个包装器以便于选择
制作了一个 Javascript 对象来保存您的选项数据。这种方式更清洁，更易于维护。
使用容器 div 上的委托处理程序进行事件处理，使其更易于维护并可以添加更多处理程序
重写了添加行函数，以便克隆当前行。
用jQuery风格重写remove函数
重写了 change 函数以使用 javascript 对象。

var $contentr = $('#contentr');

//Clone this rowWrapper div, add remove button and append it to add another row
$contentr.on('click', '.addNewButton', function() {
  var $removeButton = $('<input>');
  $removeButton.attr('type', 'button');
  $removeButton.addClass('removeButton');
  $removeButton.val('Remove');

  $newRow = $(this).closest('.rowWrapper').clone();
  $newRow.append($removeButton).appendTo('#contentr');
  $('.rowWrapper').last().find('.marklocation').trigger('change');
});

//remove the current row if it's not the last
$contentr.on('click', '.removeButton', function() {
  $(this).closest('.rowWrapper').remove();
});

//Change the options of markingtype based on marklocation
$contentr.on('change', '.marklocation', function(event) {
  //$("#site > option").hide(); ??
  
  $this = $(event.target);
  var value = $this.val();
  
  //empty the select
  var $markingtype = $this.closest('.rowWrapper').find('.markingtype');
  $markingtype.empty();

  //filter the options which contain the runway number or default (-1)
  options.filter((opt) => {
    return opt.runways.includes(value) || opt.runways.includes('default');
  }).forEach((opt) => {
    //add the filtered options to the selectbox
    var $newOption = $('<option>');
    $newOption.val(opt.value);
    $newOption.text(opt.text);
    $markingtype.append($newOption);
  });
});

//data object dat contains text and value for the option elements belonging to runways
var options = [{
    text: '- Marking Runway Types -',
    value: 't',
    runways: ['default']
  }, {
    text: 'Runway Designator Marking',
    value: 'Runway Designator Marking',
    runways: ['Runway 35', 'Runway 18', 'Runway 36']
  },
  {
    text: 'Runway Centerline Marking',
    value: 'Runway Centerline Marking',
    runways: ['Runway 35', 'Runway 18', 'Runway 36']
  },
  {
    text: 'Runway Threshold Marking',
    value: 'Runway Side Strip Marking',
    runways: ['Runway 35', 'Runway 18', 'Runway 36']
  },
  {
    text: 'Runway Side Strip Marking',
    value: 'Runway Side Strip Marking',
    runways: ['Runway 35', 'Runway 18', 'Runway 36']
  },
  {
    text: 'Runway Aiming Point Marking',
    value: 'Runway Aiming Point Marking',
    runways: ['Runway 35', 'Runway 18', 'Runway 36']
  },
  {
    text: 'Runway Touchdown Zone Marking',
    value: 'Runway Touchdown Zone Marking',
    runways: ['Runway 35', 'Runway 18', 'Runway 36']
  },
  {
    text: 'Runway Displaced Threshold Marking',
    value: 'Runway Displaced Threshold Marking',
    runways: ['Runway 35', 'Runway 18', 'Runway 36']
  },
  {
    text: 'Chevron Markings For Stopway',
    value: 'Chevron Markings For Stopway',
    runways: ['Runway 35', 'Runway 18', 'Runway 36']
  },
];

.rowWrapper {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="contentr">
  <div class="rowWrapper">
    <select class="marklocation" name="marklocation[]" style="width: 42%">
      <option value="">- Location -</option>
      <option value="Runway 17">Runway 17</option>
      <option value="Runway 35">Runway 35</option>
      <option value="Runway 18">Runway 18</option>
      <option value="Runway 36">Runway 36</option>
    </select><br/>
    <select class="markingtype" name="markingtype[]" style="width: 42%">
      <option value="">-- Marking Type -- </option>
    </select><br/>

    <select class="tdmPassport" name="tdmPassport[]" style="width: 42%" class="auto-style2">
      <option value="">- Marking Condition -</option>
      <option value="Good:Accepted Level" style="background-color: #29BB29">Good</option>
      <option value="Medium:Maintenance Plan Level" style="background-color: yellow">Medium</option>
      <option value="Poor:Corrective Action Level" style="background-color: #FE4E4E">Poor</option>
    </select><br>
    <p class="auto-style3">Maintenance Plan:</p>
    <textarea class="markingplan" name="markingplan[]" style="width: 572px; height: 129px"></textarea>
    <br>
    <input class="addNewButton" type="button" value="Add new"><br>
  </div>
</div>

【讨论】：