Question

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

当你点击“请选择颜色”时，它没有问题显示，但是当你“添加更多图像”并点击另一个“请选择颜色”时，下拉列表不能下拉。

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

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

Answer 1

尝试仅在可见元素上添加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/

带有图像的Jquery下拉列表未显示

1 个答案: