-1

我正在使用http://www.marghoobsuleman.com/blog/jquery-image-dropdown并且它显示下拉列表没有问题但是当我将下拉列表包含到隐藏的 div （稍后将添加回来）下拉列表没有t 正常工作。

当您可以单击“请选择颜色”时，它没有问题显示，但是当您“添加更多图像”并单击另一个“请选择颜色”时，下拉菜单无法下拉。

请让我知道我做错了什么？

<!doctype html>
<head>
 <link rel="stylesheet" href="dd.css" />
 <script src="jquery-1.7.1.min.js"></script>
 <script src="jquery.dd.min.js"></script>

<script>
$(document).ready(function(){
 $(".colormenu").msDropDown();

 var spotMax = 4;
 if($('.spot').size() >= spotMax) { $(obj).hide(); }

 $("#add").click(function(){ addSpot(this, spotMax); });
});

function addSpot(obj, sm) {
    var num = eval($('.spot').size()) + 1;
    var upload_area = $('#upload_area').html();

    $('#spots').append('<div class="spot">'+upload_area+'</div>').find(".remove").click(function(){
        $(this).parent().remove();
        $('#add').show();
    });

    if($('.spot').size() >= sm) {
        $(obj).hide();
    }
}
</script>    
</head>
<body>

<div id="spots">
 <div>
  <input type="file" name="pic[]" />
  <select name="color_id[]" class="colormenu" width="150" style="width:150px"  >
  <option value="0">Please choose color</option>
   <option value="14" data-image="/img/color-code/14.jpg">Gold</option>
   <option value="15" data-image="/img/color-code/15.jpg">Beige</option>
   <option value="138" data-image="/img/color-code/138.jpg">Rose Gold</option>
  </select>
 </div> 


 <div id="upload_area" style="display:none;">
  <div style="height:8px;">&nbsp;</div>

  <input type="file" name="pic[]" />
  <select name="color_id[]" class="colormenu" width="150" style="width:150px">
  <option value="0">Please choose color</option>
   <option value="14" data-image="/img/color-code/14.jpg">Gold</option>
   <option value="15" data-image="/img/color-code/15.jpg">Beige</option>
  </select> <a style="cursor:pointer;" class="remove">Remove this image</a>

 </div>

 <input type="button" name="add" id="add" value="Add more Image" />
</div>
4

1 回答 1

0

尝试添加msdropdown唯一可见元素；然后当您显示项目时再次附加插件。

代码：

$(document).ready(function () {
    $(".colormenu:visible").msDropDown();

    var spotMax = 4;
    if ($('.spot').size() >= spotMax) {
        $(obj).hide();
    }

    $("#add").click(function () {
        addSpot(this, spotMax);
    });
});

function addSpot(obj, sm) {
    var num = eval($('.spot').size()) + 1;
    var upload_area = $('#upload_area').html();

    $('#spots').append('<div class="spot">' + upload_area + '</div>').find(".remove").click(function () {
        $(this).parent().remove();
        $('#add').show();
    });

    if ($('.spot').size() >= sm) {
        $(obj).hide();
    }

     $(".colormenu:visible").msDropDown();
}

演示：http: //jsfiddle.net/Lz3aW/

于 2013-10-12T13:46:57.170 回答