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个内联元素，正如你所看到的，它将代码拉入最后一个select元素并将它们分组。

对于草率的描述感到抱歉，我认为这应该是一切。

原始下拉列表由Turtorial Zine在TutorialZine "Making better select elements"

创建

Answer 1

首先，Tutorial Zine代码未编码为支持多个元素。最好的解决方案是创建一个支持多个元素的jQuery插件，但这极大地拓宽了这个答案的范围。

我建议将他们的代码（除了.ready（））包装到一个带参数的函数中：select的选择器和下拉菜单的选择器：

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');

... 

});

根据编写此代码的方式，每个选择/下拉菜单组合必须有不同的类名。

我没有对此进行测试，因此可能会进行一些其他调整以使其正常工作。

Answer 2

他们实际上已将此转换为其网站上的插件。见here。无需重新发明轮子。

修改
根据教程：

您可以简单地使用此插件删除tzSelect文件夹（可从下载按钮获得上面）进入你的项目根目录，和包括jquery.tzSelect.css和你的HTML中的jquery.tzSelect.js 文档。

示例代码（来自教程）

$(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(); });

Jquery HTML5选择下拉列表重定位冲突。需要在同一页面上有多个选择下拉列表

2 个答案: