克隆Div元素并将事件附加到新元素上 - Clone Div elements and attach events to new elements

Clone Div elements and attach events to new elements

本文关键字：元素新元素 Div 事件克隆 | 更新日期: 2023-09-27

我有相互关联的下拉框。第二个下拉框的值根据第一个下拉框的值进行过滤。

现在我想把div中class="old_div"中的元素克隆到div中class="new_div"，并为div中class="new_div"中的每个新元素添加事件。

添加

    <div class="old_div" >
    <select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
    </select>

    <select name="select2" id="select2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM</option>
    </select>
        <br />
    </div>
    <div class="new_div">

    </div>

我能够克隆元素到新的div使用Jquery

Jquery代码:

$("#add_a").on('click',function(){
    var data = $('.old_div').html();
    $('.new_div').append(data);
});
$("#select1").on('change', function() { 
if($(this).data('options') == undefined){
$(this).data('options',$('#select2 option').clone());
} 
var id = $(this).val().trim();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});

但是我怎样才能使新的元素相互关联呢?

我已经创建了提琴http://jsfiddle.net/6YEQx/作为参考

您正在使用id和选择框并复制它，这导致在jQuery中使用id识别选择框的问题。所以用class代替id。

HTML:

<select name="select1" class="select1">
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>
<select name="select2" class="select2">
  <option value="1">Banana</option>
  <option value="1">Apple</option>
  <option value="1">Orange</option>
  <option value="2">Wolf</option>
  <option value="2">Fox</option>
  <option value="2">Bear</option>
  <option value="3">Eagle</option>
  <option value="3">Hawk</option>
  <option value="4">BWM</option>
</select>

你还需要动态添加元素，所以需要使用$(document)和on绑定更改事件。

EDIT:还在add_a按钮脚本中添加了新行，以初始显示第二个选择框中的所有选项。

jQuery:

  $("#add_a").on('click',function(){
        var data = $('.old_div').html();
        $('.new_div').append(data);
        // to show all options initially and remove any preselected option
        $('.new_div').find('.select2:last option').show().removeAttr('selected');
    });
$(document).on('change',".select1", function() { 
    var id = $(this).val().trim();
    $(this).next('.select2').find('option').hide();
    var $options = $(this).next('.select2').find('option[value=' + id + ']');
   $options.show();
   $options.first().attr('selected',true)
});