上下框内值的联动

效果：在页面上有上下两个框  点击上框（A）中的值 下框就可以展示出来 上框里同样的值就删除，点击下框的值，在下框消失，在上框（B）展示出来。其实看到这样的例子博那个不觉得难。当时是有俩个问题 1重新点开弹出框，（A）和（B）中又有了相同的值；2在改变了下拉框值的情况下，原来的值（B）还在，但他并不属于重新选择的值

 <div class="modan" style="display:none;">
　　　　<div class="modan_nrk" style="height:443px;">
        　　　　<p style="margin-bottom:5px">点击选择栏目:</p>
        　　　　<div class="gunDong" style="border:1px solid #ccc">
       　　　　     <dl class="weixuan" style="overflow-y:auto">
        　　　　　　     <dt>点击选择（A）</dt>
                   </dl>
               </div
              <p style="margin-bottom:5px">显示所选栏目:</p>
              <div class="gunDong" style="border:1px solid #ccc"> 
                  <dl class="yixuan" style="overflow-y:auto">
                      <dt>选择（B）</dt>
                  </dl>
              </div>
     </div>
  

js代码：

//此代码解决的问题是在发现下拉框的值改变的时候，先清空（A）中的值，然后就是弹出窗重新渲染
$("#Class").bind("change",
function() {
    $(".show").each(function() {
        $(this).parent().remove();

    })
})
//弹出配置窗
$(".setShe").click(function() {
    var $selected = $('.modan_nrk .yixuan');
    var $unselected = $('.modan_nrk .weixuan');
    var xuanZ = document.getElementsByClassName('show');
    var weiX = document.getElementsByClassName('hide');
    var unselected = document.getElementsByClassName('weixuan')[0];
    layer.open({
        type: 1,
        area: ['650px', '550px'],
        //宽高
        content: $(".modan"),
        btn: ['确定', '取消'],
        //弹出框弹出后
        success: function() {
            //ajax后台传值 在A中显示的值
            $(".weixuan").html(GetDeviceAttributeJSON());

            //（A）选中值进行点击
            $selected.delegate('a', 'click',
            function() {

                var $this = $(this),
                $dd = $this.parent();
                $this.removeClass('show').addClass('hide');
                $unselected.append($dd.remove());
            });
            //（B）未选值进行点击
            $unselected.delegate('a', 'click',
            function() {
                var $this = $(this),
                $dd = $this.parent();
                $this.removeClass('hide').addClass('show');
                $selected.append($dd.remove());
            });

            //删除选择值与未选中一样的元素 这个是为了解决重复点开这个弹出框 不让后台出入的值在（A）中渲染的时候和（B）中的值重复
            $(".hide").each(function() {
                var _this = $(this),
                hide = _this.text();
                $(".show").each(function() {
                    var show = $(this).text();
                    if (hide == show) {
                        _this.parent().remove()
                    }
                })
            })
        },
        //弹出框点击确定后
        yes: function(index) {

         }
    return false;
});

 

转载于:https://www.cnblogs.com/nf1206/p/6667727.html