Question

我正在处理自定义要求的HTML表单。这是个人项目，我不想使用现成的插件。

我将所有代码放在这里，需要你的帮助来解决我遇到的一个严重问题。首先，让我们看看到目前为止我用以下代码做了什么！

我做了什么： 我在HTML表单中采用了SELECT - OPTION结构。我编写了自定义函数将其转换为UL-LI结构，在提交表单时使用SELECT - OPTION保持相同的功能。

最重要的是OPTION标记中的 VALUE 属性。我采用了自定义属性＆＃34;数据选择＆＃34;进行这样的计算。

QUERY：我在页面上提交包含多个SELECT的表单时遇到问题（将结构转换为UL-LI后）。

分析：

尝试使用默认的SELECT -OPTION结构时，我在下面的参数中添加了在FORM提交时附加URL而不更改多个下拉列表中的任何值。 https://www.google.com/?abc=1&def=1&xxx=1。正如您在＆＃34;？＆＃34;之后可以在URL中看到的那样。 NAME属性带有默认值＆＃34; 1＆＃34;这是默认选择的值。
现在在使用我的函数（将SELECT-OPTIONS转换为UL-LIs）之后，我跟随＃1并且我发现它行为不端，而我们没有更改下拉列表中的值。如果我提交表格而不改变掉落的价值，请将此参数附加到URL。请将＃1中的网址与此＆gt;＆gt;进行比较https://www.google.com/?abc=0&def=0&xxx=0。此处所选的默认值已通过配置传递。 <script>$('select').customSelect({selected: '2',alignRight: 'true'});</script>。配置参数＆＃34; 已选择＆＃34;给定值＆＃34; 2 ＆＃34;。因此，默认情况下，如果我们不在＃2的URL中删除INSTEAD OF＆＃34; 0＆＃34;（ZERO）中的值，则应选择第二个LI。

我需要帮助才能获得默认值！

以下是2个代码段和

HTML

<form method="get" action="http://google.com">
    <select name="abc">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>
    <br><br><br><br><br><br>
    <select name="def">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>
    <br><br><br><br><br><br>
    <select name="xxx">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>
    <input type="submit" value="submit">
</form>
<script>
    $('select').customSelect({
        selected: '2',
        alignRight: 'true'
    });
</script>

JS

(function ($) {

    $.fn.customSelect = function( options ) {
        var settings = $.extend({
            //mainWidth: '200', 
            selected: '0',
            alignRight: 'false',
        }, options );

        return this.each(function() {
            var el          = $(this);
            var name        = el.prop('name');

            var optionTag   = el.children();
            var wrapperDIV  = $('<div class="customSelect"/>');
            var newDIV      = $('<div class="custom-select"/>');
            var inputTag    = $("<input name='"+name+"' type='text' readonly='readonly' />").hide();
            var inputDummy  = $("<div class='input-dummy'/>");
            var valueHolder = $('<div class="value-holder clearfix"/>');
            var ULTag       = $('<ul class="clearfix"/>');
            var spanTag     = '<span/>'

            el.wrap(wrapperDIV);
            el.parent().append(newDIV);

            newDIV.append(valueHolder);
            valueHolder.append(spanTag);
            valueHolder.append(inputTag);
            valueHolder.append(inputDummy);
            newDIV.append(ULTag);


            optionTag.each(function(){
                ULTag.append("<li data-selected='"+$(this).val()+"'>"+$(this).text()+"</li>");
            }).end().remove();

            var valDefault  = $('li').eq(settings.selected - 1).val();
            var textDefault = $('li').eq(settings.selected - 1).text();
            $(inputTag).val(valDefault);
            $(inputDummy).text(textDefault);

            valueHolder.click(function(){
                $(this).next().toggle();
            });

            ULTag.each(function(){
                $('li',this ).click(function(){
                    $(this).each(function(){
                        $(this).addClass('active').siblings().removeClass('active');
                        var x = $(this).data('selected');
                        var y = $(this).text();
                        $(inputTag).val(x);
                        $(inputDummy).text(y);
                        $(this).parent().hide();
                    });
                });
            });

            if(settings.selectorRight == 'true'){
                inputDummy.css('float', 'right');
                //valueHolder.css('float', 'right');
            }
            else{
                inputDummy.css('float', 'left');
                //valueHolder.css('float', 'left');
            }

            var woVH = valueHolder.width();
            inputDummy.width(woVH-20);
            ULTag.width(woVH);


        });
    };

}( jQuery ));

JSFIDDLE

Answer 1

您需要更改行

var valDefault  = $('li').eq(settings.selected - 1).val();
var textDefault = $('li').eq(settings.selected - 1).text();

到

var valDefault = $(optionTag).eq(settings.selected - 1).val();
var textDefault = $(optionTag).eq(settings.selected - 1).text();

每次都在页面上选择nth li元素。看看我的演示小提琴打开你的控制台，你会看到我的意思。

演示：http://jsfiddle.net/robschmuecker/358p1816/1/

自定义SelectBox（UL-LI）在HTML FORM中具有相同的功能

1 个答案: