从选择中获取值并将它们移动到 ul - jquery

Question

我现在正在创建一个插件，它允许我将选择框更改为漂亮的东西，我通过将页面上找到的选择框更改为定义列表来做到这一点，我正在嵌套一个定义描述ul 在其中，li 是选择列表中的值。

但是我遇到了一个问题，例如，如果我在页面上有 3 个选择框，我会遇到一个奇怪的错误，并且我无法确定我的代码中哪里出错了，但是添加了多个 dd 是什么？到每个dl 例如第二个dl 有2 个dd 应该有一个，就像第三个选择框应该有1 个dd 但它有3 个，看起来dd 的数量的创建匹配循环的索引。我怎样才能使每个 dl 只创建一个 dd，并添加正确的选项。

这是我的插件代码，

    /***********
* Select-Me create pretty select lists using a <ul> inplace of the <select>
* Author: Simon Ainley (on behalf of The Factory Agency)
* Version: 0.0.1
***********/
(function($){  
    $.fn.selectMe = function(options) {  
        var defaults = {
            select_text : null,
            remove_first_value : false,
            speed : 1000
        }

        var options = $.extend(defaults, options);

        return this.each(function(index) {
            //get an instance of the object we are working with
            var obj = $(this);
            var obj_name = obj.attr('name');
            console.log(obj_name);
            obj.closest('form').append('<input type="hidden" class="dropdown_value" value="" name="'+obj_name+'"/>');
            var options = $("option", obj);
            var replacement_list_heading = "<dl class='dropdown "+obj_name+"'><dt><span>"+defaults.select_text+"</span><a href=''>Go</a></dt></dl>";
            obj.closest('form').prepend(replacement_list_heading);
            var values_start = "<dd class='shadow_50'><ul></ul></dd>";
            $(".dropdown").append(values_start);
            if(defaults.remove_first_value == true) {
                options.splice(0, 1);
            }
            options.each(function(index){
                    $(".dropdown." + obj_name + " dd ul").append(
                        '<li><a href="#"><span class="option">' + 
                        $(this).text() + '</span><span class="value">' + 
                        $(this).val() + '</span></a></li>'
                    );

            });

            obj.remove();

            $('.dropdown li a').hover(function() {
                $(this).parent('li').addClass('hover');
            }, function() { 
                $(this).parent('li').removeClass('hover');
            });

            $(".dropdown dt a").click(function(e) {
                $(this).closest("dl").find("dd").slideToggle(defaults.speed);
                e.preventDefault();
            });

            $(".dropdown ul a").click(function(e) {
                var value = $(this).find('span').text();
                $(this).addClass('selected');
                $(".dropdown_value").val(value);
                $(".dropdown dt span").text($('.selected .option').text());
                $(".dropdown dd").slideUp(defaults.speed);
                $(this).removeClass('selected');
                e.preventDefault();
            });
        });
    };  
})(jQuery);

我相信问题出在代码的这些部分中，

var options = $("option", obj); - 我想我需要区分每组选项？

options.each(function(index){

                    $(".dropdown." + obj_name + " dd ul").append(
                        '<li><a href="#"><span class="option">' + 
                        $(this).text() + '</span><span class="value">' + 
                        $(this).val() + '</span></a></li>'
                    );

            });

我相信这个位只是循环，不管它是否应该停止并将选项添加到新的dd？

任何帮助都会很棒！

我如何调用我的插件，

    $(".type select").selectMe({
    select_text : "I'm looking for...",
    remove_first_value : true,
});

$(".skill select").selectMe({
    select_text : "Skill",
    remove_first_value : true,
});

$(".gender select").selectMe({
    select_text : "Gender",
    remove_first_value : true,
});

以及更改的 HTML，

    div class="grid_4">
                        <fieldset>
                                <div class="formRow drop_down">

<select name="type">
<option value="0" selected="selected">I'm looking for...</option>
<option value="1">actors</option>
<option value="2">presenters</option>
<option value="3">voice overs</option>
</select>
    </div>
                        </fieldset>
                    </div>

                    <div class="grid_4">

                        <fieldset>
                                <div class="formRow drop_down">
<select name="skill">
<option value="0" selected="selected">Skill</option>
<option value="1">actors</option>
<option value="2">presenters</option>
<option value="3">voice overs</option>
<option value="4">dancers</option>
<option value="5">accents</option>

<option value="6">film</option>
<option value="7">tv</option>
</select>
    </div>
                        </fieldset>
                    </div>

                    <div class="grid_4">
                        <fieldset>  
                                <div class="formRow drop_down">
<select name="gender">

<option value="0" selected="selected">Gender</option>
<option value="1">male</option>
<option value="2">female</option>
</select>
    </div>
                        </fieldset>
                    </div>

Answer 1

就目前而言，我完全不确定它是如何执行的，选择器“.type select”不会从您提供的 HTML 中返回任何内容 - 为此，您需要 <div class='type' > 和 </div> 围绕着你的第一个 <select>。

我明白为什么你会得到多个 DD，在你的插件中你执行这个：

var values_start = "<dd class='shadow_50'><ul></ul></dd>";
$(".dropdown").append(values_start);

该选择器将针对您迄今为止在页面上创建的每个 .dropdown 类。因此，对于插件的每次后续调用，您都会将 DD 元素添加到您已经创建的 DL 元素中。

我想你想要$(".dropdown." + obj_name).append(values_start);。

因为您最后的事件调用通常以 .dropdown 类为目标，所以它们会遇到同样的问题，在每个元素上创建多个事件。

您在整个插件中进行了很多选择器调用，这将导致 jQuery 浏览整个 DOM（例如，在您的 options .each 函数中）。由于在相当多的步骤中，您只是构建了一个元素，然后您可以将其添加到页面中，因此您可能应该考虑只构建它并将其添加到页面中，而无需使用其他选择器。