个人中心
gpt4 book ai didi

javascript - 如何复制包含许多脚本的div onclick

转载 作者：可可西里 更新时间：2023-11-01 14:58:58 26 4
gpt4 key购买 nike

我的网页包含许多选择选项和描述框我希望当用户按下(添加新)按钮时，新的 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>

最佳答案

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

  • 将输入元素名称放在方括号中，以便它们将作为数组发布在表单提交上
  • 在每一行周围添加一个包装器以便于选择
  • 制作了一个 Javascript 对象来保存您的选项数据。这样它会更干净，更易于维护。
  • 在容器 div 上使用委托(delegate)处理程序进行事件处理，使其更易于维护并有可能添加更多处理程序
  • 重写了添加行函数，使其克隆当前行。
  • 以 jQuery 风格重写了删除函数
  • 重写了更改函数以使用 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>

关于javascript - 如何复制包含许多脚本的div onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57714924/

26 4 0
文章推荐： javascript - 无法在代码中使用从 js 文件导入的 var
文章推荐： Hadoop MultipleOutputs 输出文件 "part-day-26"
文章推荐： hadoop - ERROR 1075 : Received a bytearray from the UDF. 无法确定如何将字节数组转换为字符串
文章推荐： html - 如果 CSS flexbox 中的最后一行，则在第一行中填充剩余宽度
可可西里
个人简介

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

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