logo标签列表

如何复制包含多个onclick脚本的div

javascriptjqueryhtml
3

我有一个包含许多选择选项和说明框的网页。当用户按下(添加新)按钮时，我希望出现一个新的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更改为类应该是一个起点。 - karthick
1个回答
0

我做了一些改动，以改善代码的可读性和可维护性。

  • 给输入元素命名方括号，这样它们在表单提交时将作为数组发布
  • 为每一行添加包装器，以便轻松选择
  • 创建了一个Javascript对象来保存您的选项数据。这样做更清晰，更易于维护。
  • 使用容器div上的委托处理程序进行事件处理，使其更易于维护并有可能添加更多处理程序
  • 重写了添加行函数，使其克隆当前行。
  • 以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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接