選擇下拉式的功能jQuery的

Question

我有一個風格通過生成一個div錨，列表和隱藏字段選擇輸入的功能：

function selectMenu() { 

    var selectMenu = $("#cf-budget"); 

    $('<input id="' + selectMenu.attr("id") + '-hidden" type="hidden" name="' + selectMenu.attr("name") + '" value="" />').insertAfter(selectMenu); 

    selectMenu.hide(); 
    var selectTitle = selectMenu.children("option:eq(0)").text(); 
    var newSelectMenu = '<div class="selectmenu"><div class="selectmenu-selected"><a rel="placeholder">'+ selectTitle +'</a></div><ul class="selectmenu-menu"><li><a rel="placeholder">'+ selectTitle +'</a></li>'; 
    selectMenu.find("option:not(:eq(0))").each(function() { 
     newSelectMenu += '<li><a rel="' + $(this).val() + '">' + $(this).text() + "</a></li>"; 
    }); 
    newSelectMenu += "</ul></div>"; 
    $(newSelectMenu).insertAfter(selectMenu); 
    var newSelectMenu = $("div.selectmenu"); 

    $("div.selectmenu-selected a", newSelectMenu).live("click", function() { 
     $("ul.selectmenu-menu", newSelectMenu).toggle(); 
     return false; 
    }); 
    $("body").live("click", function() { 
     $("ul.selectmenu-menu", newSelectMenu).hide(); 
    }); 
    $("ul.selectmenu-menu a", newSelectMenu).live("click", function() { 
     var optionValue = $(this).attr("rel"); 
     var optionText = $(this).text(); 
     $("ul.selectmenu-menu", newSelectMenu).hide(); 
     $("div.selectmenu-selected a", newSelectMenu).text(optionText); 
     $("#" + selectMenu.attr("id") + "-hidden").val(optionValue); 
     var activeMessageType = $("ul.message-type.active"); 
     if (activeMessageType.length) { 
      activeMessageType.slideUp(300, function() { 
       $("#" + optionValue).addClass("active").slideDown(300); 
      }).removeClass("active"); 
     } else { 
      $("#" + optionValue).addClass("active").slideDown(300); 
     } 
     return false; 
    }); 
} 

$(document).ready(function() { 
    selectMenu(); 
}); 

我的問題是如何調整這使它爲'x'數量的選擇輸入工作？目前它只需要一個選擇的Id或類。

我猜我需要通過函數選擇ID或類名，以便它可以做到每個下拉菜單的東西？

Answer 1

我已經做了的jsfiddle這裏現在完全工作：http://jsfiddle.net/7TaqN/1/

由ach的建議是完美的，但是有一個問題與您的代碼的主體。以下更改必須而成，使其工作：

這行有，因爲它推翻了「這個」選擇要刪除：

var selectMenu = $("#cf-budget"); 

此行不得不進行修改，以選擇具有類該元件的ID單擊以 防止所有元素被影響：

$(newSelectMenu).insertAfter(selectMenu); 
var newSelectMenu = $("div.selectmenu#"+ selectMenu.attr("id")); 

這是完整的工作代碼作爲一個jQuery模塊：

（請注意，這與jQuery 1.8爲您使用的是過時的.live（）方法只在工作1.9

$.fn.selectMenu = function() { 
    return this.each(function() { 
     var selectMenu = $(this); 
     //Body of your selectMenu() function goes here 
     //All selectors should be in the context of the selectMenu element 
     $('<input id="' + selectMenu.attr("id") + '-hidden" type="hidden" name="' + selectMenu.attr("name") + '" value="" />').insertAfter(selectMenu); 

     selectMenu.hide(); 
     var selectTitle = selectMenu.children("option:eq(0)").text(); 
     var newSelectMenu = '<div id="' + selectMenu.attr("id") + '" class="selectmenu"><div id="' + selectMenu.attr("id") + '" class="selectmenu-selected"><a rel="placeholder">' + selectTitle + '</a></div><ul class="selectmenu-menu"><li><a rel="placeholder">' + selectTitle + '</a></li>'; 
     selectMenu.find("option:not(:eq(0))").each(function() { 
      newSelectMenu += '<li><a rel="' + $(this).val() + '">' + $(this).text() + "</a></li>"; 
     }); 
     newSelectMenu += "</ul></div>"; 
     $(newSelectMenu).insertAfter(selectMenu); 
     var newSelectMenu = $("div.selectmenu#"+ selectMenu.attr("id")); 

     $("div.selectmenu-selected a", newSelectMenu).live("click", function() { 
      $("ul.selectmenu-menu", newSelectMenu).toggle(); 
      return false; 
     }); 
     $("body").live("click", function() { 
      $("ul.selectmenu-menu", newSelectMenu).hide(); 
     }); 
     $("ul.selectmenu-menu a", newSelectMenu).live("click", function() { 
      var optionValue = $(this).attr("rel"); 
      var optionText = $(this).text(); 
      $("ul.selectmenu-menu", newSelectMenu).hide(); 
      $("div.selectmenu-selected a", newSelectMenu).text(optionText); 
      $("#" + selectMenu.attr("id") + "-hidden").val(optionValue); 
      var activeMessageType = $("ul.message-type.active"); 
      if (activeMessageType.length) { 
       activeMessageType.slideUp(300, function() { 
        $("#" + optionValue).addClass("active").slideDown(300); 
       }).removeClass("active"); 
      } else { 
       $("#" + optionValue).addClass("active").slideDown(300); 
      } 
      return false; 
     }); 
    }); 
}; 

$(document).ready(function() { 
    $('.mySelectClass').selectMenu(); 
}); 

Answer 2

你可以把它變成一個jQuery插件：

$.fn.selectMenu = function() { 
    return this.each(function() { 
     var selectMenu = $(this); 
     //Body of your selectMenu() function goes here 
     //All selectors should be in the context of the selectMenu element 
    }); 
}; 

然後用標準的jQuery選擇像這樣使用它：

$('.mySelectClass').selectMenu(); 

編輯：看起來你正在使用的已經設定的背景第二個參數jQuery()因此額外使用find應該沒有必要。儘管如此，通過視覺解析的代碼很多 - jsfiddle可能會有所幫助。

您還需要更換一些你的選擇，使他們在selectMenu元素的兒童進行評估，例如：

selectMenu.find("div.selectmenu-selected a", newSelectMenu).live("click", function() {