JQuery SELECT radio simulation jQuery.select.js_jquery

Single selection simulation based on jQuery JavaScript Library v1.3.2
(This file is modified based on zhangjingwei’s Jquery Select (radio selection) simulation plug-in V1.3.4)
a. The main reason for the modification is that the original Zhangjingwei's simulation has a problem with the display method. There will be misalignment when appearing alternately with text. Now change the display of the simulated DIV to inline mode. More naturally embedded into lines of text.
b. Automatically convert the select style named 'commonselect' after loading the file. Simplify the call
c. Response to the onchange() event of select. And small adjustments to width acquisition
jquery.select.js

Copy code The code is as follows:

/*
* jQuery.select.js
*/
jQuery.fn.sSelect = function(){
    var selectId = $(this).attr('id');
    var selectZindex = $(this).css('z-index');
    var selectIndex = $('#'+selectId+' > select > option').index($('#'+selectId+' > select > option:selected')[0]);
    $('#'+selectId).append('

');
$('#' selectId ' > div > h4').empty().append($('#' selectId ' > select > option:selected').text() );
$('.dropselectbox').css("display", 'block');

//Get the width priority of select. The width in select style - select automatic width - default is 60
var selectcssWidth = $('#' selectId '> select').css('width');
selectcssWidth = typeof(selectcssWidth) =='undefined' ? 0 : parseInt(selectcssWidth.replace ('px','')) 5 ;
var selectWidth = selectcssWidth ? selectcssWidth : ( $('#' selectId '> select').width() > 0 ? $('#' selectId '> ; select').width() 5 : 60);
$('#' selectId).css("margin-right",selectWidth); //Modify offset
$('#' selectId ' > div > h4').css("width", selectWidth); //Assign the width of the original select to the generated select (not the total width of h4)
$('#' selectId ' > ; div > ul').css("width",selectWidth); //Assign the total width of h4 to Ul
$('#' selectId ' > select').hide();
$('#' selectId ' > div').hover(function(){
$('#' selectId ' > div > h4').addClass("over");
$( '#' selectId ' > ("over");
$('#' selectId ' > div > span').removeClass("over");
});
$('#' selectId)
.bind("focus",function(){
__clearSelectMenu();
$('#' selectId ' > div > h4').addClass("over");
$( '#' selectId ' > div > span').addClass("over");
})
.bind("click",function(e){
//$('# value2').append('Click: ' selectIndex '
');
if($('#' selectId ' > div > ul').css("display") == 'block '){
         __clearSelectMenu(selectId);
                   return false;                                $('#' selectId ' > div > h4').addClass ("current"); 🎜>          $('#' selectId ' > div > ul').show(); .msie || $.browser.opera){                                                                                                                                   ('overclass') ;
              __setSelectValue(selectId); '#' selectId ' > if (windowspace < ulspace && windowspace2 > 0) {
                          $('#' selectId ' > div > ul').css({top:-ulspace});
            }else{
                $('#' selectId ' > div > ul').css({top:$('#' selectId ' > div > h4').outerHeight(true)});
            }
            selectIndex = $('#' selectId ' > div > ul > li').index($('.selectedli')[0]);
            $(window).scroll(function(){
                var windowspace = ($(window).scrollTop() document.documentElement.clientHeight) - $('#' selectId).offset().top;
                var ulspace = $('#' selectId ' > div > ul').outerHeight(true);
                if (windowspace < ulspace) {
                    $('#' selectId ' > div > ul').css({top:-ulspace});
                }else{
                    $('#' selectId ' > div > ul').css({top:$('#' selectId ' > div > h4').outerHeight(true)});
                }
            });
            //响应鼠标点击选择
            $('#' selectId ' > div > ul > li').click(function(e){                                        
                    selectIndex = $('#' selectId ' > div > ul > li').index(this);
                    //$('#value2').append('鼠标点击：' selectIndex '  
');
                    $('#' selectId '> select')[0].selectedIndex = selectIndex;
                    $('#' selectId ' > div > h4').empty().append($('#' selectId ' > select > option:selected').text());
                    __clearSelectMenu(selectId,selectZindex);
                    e.stopPropagation();
                    e.cancelbubble = true;
                    //SELECT onchange 事件
                    $('#' selectId '> select').change();
            })
            .hover(
                 function(){
                        $('#' selectId ' > div > ul > li').removeClass("over");
                        $(this).addClass("over").addClass("selectedli");
                        selectIndex = $('#' selectId ' > div > ul > li').index(this);
                    },
                    function(){
                        $(this).removeClass("over");
                    }
            );
            //End
        };
        e.stopPropagation();
    })
    .bind("mousewheel",function(){
        //以后也许支持滚轮    
        /*$('#' selectId ' > div > ul > li').hover(
            function(){
             return false;
            },
            function(){
                return false;
            }
        );*/
    })
    .bind("dblclick", function(){
        __clearSelectMenu();
        return false;
    })
    .bind("keydown",function(e){
        //var hotkeys = e.keyCode;
        $(this).bind('keydown',function(e){
            if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){
                return false;
            }
        });
switch(e.keyCode){ //Set to true to give a case range
case 13:
                                                enter
                    //$('#value2').append('The value received by pressing Enter: ' selectIndex '                                                                                                                        > case 27:
                                                                                                                                                                                             $('#' selectId ' > div > ul > li').removeClass ("over");
     selectIndex = 0; 🎜>                  $('#' selectId ' > div > ul > li').removeClass("over");
     selectIndex = ($('#' selectId ' > select > option').length - 1);
                                                                                                          selectIndex = ($('# ' selectId ' > select > option').length - 1);
__keyDown(selectId,selectIndex);
case 36:
        $('#' selectId ' > div > ul > li').removeClass("over");
     selectIndex = 0; >         case 38:
                  // up
                      //$('#value2').append('Original value: ' selectIndex '                                                                                                                 ).removeClass("over");
                                                                                           else{
                    selectIndex--;
                };
                //$('#value2').append('向上改变的aa值：' selectIndex '  ');
                __keyDown(selectId,selectIndex);
                break;
            case 40:
                //down
                //$('#value2').append('传递过来的：' selectIndex '  ');
                $('#' selectId ' > div > ul > li').removeClass("over");
                if (selectIndex == ($('#' selectId ' > select > option').length - 1)){
                    selectIndex = $('#' selectId ' > select > option').length - 1;
                }else{
                    selectIndex ;
                };
                //$('#value2').append('向下改变的aa值：' selectIndex '  ');
                __keyDown(selectId,selectIndex);
                break;
            /*case ((hotkeys > 47 && hotkeys < 59) || (hotkeys > 64 && hotkeys < 91) || (hotkeys > 96 && hotkeys < 123)):
                //首字幕查询预留接口
                //character = String.fromCharCode(hotkeys).toLowerCase();
                return false;
                break;*/
            default:
                return false;
                break;
        };
    })
    .bind("blur",function(){
        __clearSelectMenu(selectId,selectZindex);
        return false;
    });
    //禁止选择
    $('.dropselectbox').bind("selectstart",function(){
            return false;
    });
};
function __clearSelectMenu(selectId,selectZindex){
    //$('#value2').append('移除焦点：' selectIndex '  
');
    $('.dropselectbox > ul').empty().hide();
    $('.dropselectbox > h4').removeClass("over").removeClass("current");
    $('.dropselectbox > span').removeClass("over");
    $('#' selectId).removeClass('overclass');
}
function __setSelectValue(sID){
    $('#' sID ' > div > ul').empty();
    $.each($('#' sID ' > select > option'), function(i){
        $('#' sID ' > div > ul').append("

" $(this).text() "

");
    });
    $('#' sID ' > div > h4').empty().append($('#' sID ' > select option:selected').text());
    $('#' sID ' > div > ul > li').eq($('#' sID '> select')[0].selectedIndex).addClass("over").addClass("selectedli");
}
function __keyDown(sID,selectIndex){
    $('#' sID '> select')[0].selectedIndex = selectIndex;
    $('#' sID ' > div > ul > li:eq(' selectIndex ')').toggleClass("over");
    $('#' sID ' > div > h4').empty().append($('#' sID ' > select option:selected').text());
    //SELECT onchange 事件
    $('#' sID '> select').change();
}
/* 自动调用 */
$(document).ready(function(){
    var s = new Array();
    var t = document.getElementsByTagName('select');
    var j = 0;
    for(var i=0;i        if(t[i].className=='commonselect'){
            s[j] = t[i];
            j ;
        }
    }
    if(j==0)return;
    var k = m = null;
    for(var i=0;i        k = s[i].parentNode;
        m = createDiv(k, i);
        //s[i].replaceNode(m);
        k.replaceChild(m,s[i])
        m.appendChild(s[i]);
        $('#selectbox' i).sSelect();
    }    
    function createDiv(p, i){
        var div = document.createElement('div');
        div.className = 'dropdown';
        div.id = 'selectbox' i;
        div.innerHTML = ' ';
        p.appendChild(div);
        return div;    
    }
})

HTML应用

复制代码 代码如下:

 

Jquery Select (single selection) simulation plug-in V1.3.4

 

Type:

;/option>
                                                                    ​ select>
Gender:

Gender: Gender: /select>
 
 
 

You can refer to this document
http://www.jb51.net/jiaoben/21397.html