Jquery HTML5选择下拉重新调整冲突。在同一页上需要多个选择下拉菜单

Question

问候，

我正在使用HTML5和jQuery重新设置select元素。我可以用专用于该元素的.js文件成功创建一个下拉列表，但我需要有关使用此元素的多个实例填充页面的帮助。

select元素可以概括为这样：

<form> 
<select name="fancySelect" class="makeMeFancy"> 
<option value="0" selected="selected" data-skip="1">Choose Your Location</option> 
<option value="1" data-html-text="United States">United States</option> 
</select> 
</form> 

JS的更复杂，试图隐藏选择元素和更换。 简述：

var select = $('select.makeMeFancy'); 
var selectBoxContainer = $('<div>',{ 
    width  : select.outerWidth(), 
    className : 'tzSelect', 
    html  : '<div class="selectBox"></div>' 
}); 

var dropDown = $('<ul>',{className:'dropDown'}); 
var selectBox = selectBoxContainer.find('.selectBox'); 

然后它这个元素进一步下跌的脚本创建CSS样式。

我的问题是如何维护这一个JavaScript文件的多个选择元素。是否有可能有一个主要变量和多选择的类别名称，即

var select =$('select.makeMeFancy'); 
var selectBoxContainer = $('<div>',{ 
width : select.outerWidth(), 
className : 'tzSelect','tzSelectb','tzSelectc' 
html  : '<div class="selectBox"></div>' 

HTML示例，请访问：select restyling example更新：解决

我有3个要素内联，正如你可以看到它拉码进入最后一个选择元素并将它们完全分组。

对不起，我认为这应该是一切。

原下拉用Turtorial杂志超过在TutorialZine "Making better select elements"

Answer 1

他们实际上已将其转换为其网站上的插件。见here。没有必要重新发明轮子。

编辑
按照教程：

您可以通过简单 丢弃tzselect按照顺序文件夹 （可以从下载按钮上方 ）到项目的根使用这个插件，并 包括jquery.tzSelect.css和 jquery.tzSelect.js在您的HTML 文档中。

示例代码（从教程）

$(document).ready(function(){ 

    $('select.makeMeFancy').tzSelect({ 
     render : function(option){ 
      return $('<li>',{ 
       html: '<img src="'+option.data('icon')+'" /><span>'+ 
         option.data('html-text')+'</span>' 
      }); 
     }, 
     className : 'hasDetails' 
    }); 

    // Calling the default version of the dropdown 
    $('select.regularSelect').tzSelect(); 

}); 

Answer 2

创建首先，教程杂志代码没有编码以支持多个元素。最好的解决方案是创建一个支持多元素的jQuery插件，但这大大拓宽了这个答案的范围。

我建议包装他们的代码（除。就绪（））转换成带参数的函数：选择的选择，并在下拉菜单的选择：

function createHTMLSelect(selectSel, menuSel) { 
    // declare this instead 
    var select = $(selectSel); 

    ... 

    // also this 
    var dropDown = $('<ul>',{className:menuSel}); 
} 

你再打电话给你的每个函数选择你的网页上：

$(document).ready(function(){ 

// first select 
createHTMLSelect('select.makeFancy', 'dropDown'); 

// second select 
createHTMLSelect('select.makeMoreFancy', 'otherDropDown'); 

... 

}); 

你必须有不同的类名称为每个选择给这个代码写的方式/下拉菜单组合。

我还没有测试过，所以可能会有一些其他的调整来让它工作。