选择下拉式的功能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() {