帶圖像的jquery下拉列表不顯示

-1

我使用的是http://www.marghoobsuleman.com/blog/jquery-image-dropdown，它沒有顯示下拉列表的問題，但是當我將下拉列表包含到隱藏的div（將稍後添加）時，下拉列表無法正常工作。帶圖像的jquery下拉列表不顯示

當你點擊「請選擇顏色」它沒有問題顯示，但是當你「添加更多的圖像」，並點擊另一個「請選擇顏色」，下拉不能下拉。

請讓我知道我做錯了什麼？

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

來源

2013-10-12 Peter

是，實際的頁面你加載？你能爲此創建一個jsFiddle嗎？ – j08691

嘗試在可見元素上添加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-12 13:46:57

帶圖像的jquery下拉列表不顯示

回答

相關問題