如何复制div包括onclick的许多脚本 [英] How can copy div including many scripts onclick

查看：74
本文介绍了如何复制div包括onclick的许多脚本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网页包含许多选择选项和描述框 我想当用户按下(Add New)按钮new div打开时，具有相同的选择和描述框完全相同 但是我的问题是选择内容包括脚本代码..当我将其放入函数addrow()无效

I have web page includes many select options and description box I want when user press (Add New) button new div open with the same selection and description box exactly the same but my problem is the selection includes script code .. when I put it into function addrow() doesn't work

因此，当用户按下按钮(添加新内容)时，我如何才能以相同的方式复制相同的选择内容以使其正常工作 请帮助我

So how I can copy the same selection to work ad the same way when user press button (add new) please help me 

<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>

推荐答案

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

I made some changes to improve the code making it easier to read and maintain.

  • 给定输入元素的名称，将方括号命名，以便将它们作为数组发布在表单提交中
  • 在每行周围添加一个包装器，以方便选择
  • 制作一个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>

这篇关于如何复制div包括onclick的许多脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆