在HTML FORM中具有相同功能的自定义选择框（UL-LI） [英] Custom SelectBox (UL-LI) with same functionality in HTML FORM

问题描述

我正在处理自定义需求的HTML表单。这是个人项目，我不想使用随时可用的插件。

我将所有的代码放在这里，需要您的帮助才能获得一个严重的问题问题我越来越。首先，让我们看看到目前为止我在下面的代码中做了什么！

我已经做到了这么远：
我已经把SELECT - HTML表单中的OPTION结构。我写了自定义函数将其转换为UL - LI结构，并在提交表单时与SELECT - OPTION保持相同的功能。 最重要的是 OPTION标记中的VALUE 属性。我将自定义属性data-selected用于计算。

（在将结构转换为UL-LI之后）。

分析：

1. 在使用默认的SELECT -OPTION结构进行尝试时，我在下面的参数中添加了FORM提交时的URL，而不更改多个下拉列表中的任何值。 https://www.google.com/?abc=1&def=1&xxx=1 。正如你可以在？之后的URL中看到的那样NAME属性默认值为1，默认值为默认选择值。
   

2. 现在使用我的函数（将SELECT-OPTIONS转换为UL-李）我正在关注＃1，我发现它是行为不端，而我们没有改变下拉的价值。如果我提交表单而不更改从DROPDOWN获取的值，并获取附加到URL的此参数。请请求比较＃1中的网址与此>> https://www.google.com/?abc=0&def=0&xxx=0 。这里所选的默认值已经通过配置。 < script> $（'select'）。customSelect（{selected：'2'，alignRight：'true'}）;< / script> 。配置参数选择给定值 2 。因此，默认情况下，如果我们不改变下拉列表中的值INSTEAD OF＃2的URL中的0（ZERO），那么应该选择第二个LI。






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





下面是2个代码片段和



HTML

 < form method =getaction =http://google.com> 
< select name =abc> 
< option value =1>第一个< / option> 
< option value =2>秒< / option> 
< option value =3>第三< / option> 
< / select> 
< br>< br>< br>< br>< br>< br> 
< select name =def> 
< option value =1>第一个< / option> 
< option value =2>秒< / option> 
< option value =3>第三< / option> 
< / select> 
< br>< br>< br>< br>< br>< br> 
< select name =xxx> 
< option value =1>第一个< / option> 
< option value =2>秒< / option> 
< option value =3>第三< / option> 
< / select> 
< input type =submitvalue =submit> 
< / form> 
< script> 
 $（'select'）。customSelect（{
 selected：'2'，
 alignRight：'true'
}）; 
< / script> 
  

JS
< pre $ （function（$）{

$ .fn.customSelect = function（options）{
var settings = $ .extend（{
// mainWidth：'200'，
选中：'0'，
alignRight：'false'，
}，options）;

返回此值。每个（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

解决方案

您需要更改行数

  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/




I am working on HTML form on custom requirement. This is personal project and I do not want to use ready-to-use plugin.

I am placing all my code here and need your help for getting one of the serious issue I am getting. First let's see what I have done so far with below code!

WHAT I HAVE DONE SO FAR: I have taken SELECT - OPTION structure inside HTML form. I wrote custom function to convert the same into UL - LI structure maintaining the same functionality with SELECT - OPTION while submitting the form.

The most important thing is the VALUE attribute in OPTION tag. I took custom attribute "data-selected" for such a calculation.

QUERY: I am facing an issue while submitting the form with multiple SELECTs on the page (after converting structure into UL- LI).

Analysis:

1. While trying with default SELECT -OPTION structure, I am getting below parameters appending the URL on FORM submission without changing any value from the multiple dropdowns. https://www.google.com/?abc=1&def=1&xxx=1. And as you can see in the URL after "?" there is NAME attribute coming with the default value "1" which was default selected value.

2. Now after using my function (which converts SELECT-OPTIONS into UL-LIs) I am following #1 and I found it's misbehaving while we are not changing the value from the dropdown. IF I SUBMIT THE FORM WITHOUT CHANGING THE VALUE FROM DROPDOWN GETTING THIS PARAMETER APPENDING TO URL. Kindly request to compare URL in #1 with this >> https://www.google.com/?abc=0&def=0&xxx=0. Here the default selected has been passed through configuration. <script>$('select').customSelect({selected: '2',alignRight: 'true'});</script>. configuration parameter "selected" given value "2". So by default 2nd LI should be selected if we do not change value from dropdown INSTEAD OF "0"(ZERO) IN THE URL OF #2.

I need help to get that default value!

Below are 2 code snippets and

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

解决方案

You need to change your lines

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

to

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

as you were selecting the nth li element on the page every time. Have a look at my demo fiddle with your console open and you''ll see what I mean.

Demo:http://jsfiddle.net/robschmuecker/358p1816/1/

这篇关于在HTML FORM中具有相同功能的自定义选择框（UL-LI）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！