Question

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

现在我想用class =＆＃34; old_div＆＃34;克隆div中的元素。使用class =＆＃34; new_div＆＃34;进入div并使用class =＆＃34; new_div＆＃34;。

为div中的每个新元素添加事件

ADD

<小时/>

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

我可以使用Jquery

将元素克隆到新div

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/作为参考。

Answer 1

您正在使用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绑定更改事件。

编辑：还在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)
});

<强> Demo

克隆Div元素并将事件附加到新元素

1 个答案: