常见js实现功能单选框、复选框、通过div模拟下拉列表框...

1.通过js实现单选
　

function selectOne(obj,objCheckBox) {

　　for ( var i = 0; i < objCheckBox.length; i++) {

　　　　if (objCheckBox[i] != obj) {

　　　　　　objCheckBox[i].checked = false;

　　　　} else {

　　　　　　objCheckBox[i].checked = true;

　　　　}

　　}

}

View Code

 

2.验证状态是否被选

function checkRadio(radio) {

　　if (radio) {

　　　　for ( var i = 0; i < radio.length; i++) {

　　　　　　if (radio[i].checked) {

　　　　　　　　return i;

　　　　　　}

　　　　}



　　return -1;

　　}

}

View Code

 

3.获取下拉列表框选中的值

function getSelectedSmid(){

　　var options = $("#selectrole option");

　　for(var i=0;i<options.length;i++){

　　　　if(options[i].selected==true){

　　　　　　return options[i].value;

　　　　}

　　}

　　return "";

}

View Code

 

 4、通过文本输入框和div实现类似下拉列表框的简单例子：

　<div id="searchForm4" class="search" style="display: none">

                    <form action="">

                        <input  class="input" type="text" id="keyword4" value="" onchange="searchmarkdownlist(this)" /> 

　　　　　　　　　　　　　　<input class="but1" type="submit" value="搜索" onclick="searchmark(event)" />

                        <div id="searchForm4Div" style="display: none;height:254px;z-index: 1000;background-color: white;color: black;overflow: auto;">

                            <ul>

                                <li>搜索1</li>

                                <li>搜索2</li>

                                <li>搜索3</li>

                                <li>搜索4</li>

                                <li>搜索5</li>

                                <li>搜索1</li>

                                <li>搜索2</li>

                                <li>搜索3</li>

                                <li>搜索4</li>

                                <li>搜索5</li>

                                <li>搜索1</li>

                                <li>搜索2</li>

                                <li>搜索3</li>

                                <li>搜索4</li>

                                <li>搜索5</li>

                            </ul>

                        </div>

                    </form>

                </div>

                <script type="text/javascript" language="javascript">

                    $(function(){

                        $("#keyword4").focus(function(){

                            var offset=$("#keyword4").offset(); 

                            var width= $("#keyword4").width(); 

                            var height= $("#keyword4").height(); 

                            var left=offset.left;

                            var top=offset.top;  

                            $("#searchForm4Div").show().css({position:"absolute",left:left,top:top+height,width:width});

                            $("#searchForm4Div ul li").css({"line-height":"24px","height":"auto"});//因为属性有“-”，需要使用双引号

                        }).blur(function(){

                            $("#searchForm4Div").hide();

                        });



                        function searchmarkdownlist(sinput){

                            var sval = $(sinput).val();

                        }

                        $("#searchForm4Div li").click(function(){

                            $("#keyword4").val("");

                            $("#keyword4").val($(this).html());

                        }).mouseover(function(){

                            $(this).css({background: "blue"}).siblings().css({background: "white"});

                            $("#keyword4").val($(this).html());

                            $("#keyword4").unbind("onchange");

                        });

                    });

View Code

 　　html部分:

<style type="text/css">

.select_div{

    margin-top:6px; 

    background-color:white; 

    position: absolute;

    border:1px solid #7F9DB9; 

    width:152px;

    height: 200px;

    z-index: 100; 

    overflow: auto;

}

.select_div ul li{

    height: 20px;

    line-height: 20px;

}

.select_div ul li:HOVER {

    background-color: #3399FF;

}

</style>



<!-- 文本框和图片的位置 -->

<div style="position:relative;height: 22px;">                                

                                <input   style="width:140px;position:absolute;left:0px;margin: 0px;" type="text" id="v_inputCustomer">

                                <img style="position:absolute;left:140px; height:22px; width:17px;" accept="close" id="select_customer" src="img/select.gif">

                            </div>

<!-- div模拟下拉列表框 -->

<div class="select_div"  id="select_div">

        <ul>

            <li></li>

        </ul>

    </div>

View Code

　　jquery部分:

$("#v_inputManufacturer").keyup(function(){

        showLoadData("v_inputManufacturer","select_div_manufacturer",2);

    });

//设置显示数据div到文本框下面

    function showLoadData(input,div,type){

        var offset = $("#"+input).offset();  //获取相对控件的偏移位置

        loadData(div,$("#"+input).val(),type,type==1);

        $("#"+div).show().css({left:offset.left,top:offset.top+15});

    }

//填充数据

function loadData(div,custname,type,customer){

    $.ajax({

        url : "customer/findCustomers.do"+"?custname="+custname+"&type="+type,

        async : true,

        type : "POST",

        success : function(data) {

            if(data.success==true){

                $("#"+div+" ul").html("");

                var li="";

                var cms = data.message;

                for(var i=0;i<cms.length;i++){

                    li+="<li alt='"+cms[i].id+"'>"+cms[i].custname+"</li>";

                }

                $("#"+div+" ul").append(li);            

                

            }else{

                alert(data.message);

            }

        }

    });

}

View Code

 在ajax加载完数据后注册li点击事件:

$("#select_div ul li").click(function(){

     var text = $(this).html();                 

     $("#select_div").hide();

});

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="../taglib/taglib.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />

<meta http-equiv="Pragma" content="no-cache" />

<meta http-equiv="Cache-Control" content="no-cache" />

<meta http-equiv="Expires" content="0" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>首页</title>

<script src="../js/common/jquery-1.10.2.js" type="text/javascript"></script>



<script>

$(function() {

    var type=-1;

    $("#wupin_id").change(function(){

        type=$(this).val();

        $("#v_inputlist").val("");

        if(type==1){//经纬度

            $(".quickquery").children("span.latitude").show();

            $("#v_longitude").show();

            $("#v_latitude").show();

            $("#v_inputlist").hide();

        }else{

            $(".quickquery").children("span.latitude").hide();

            $("#v_longitude").hide();

            $("#v_latitude").hide();

            $("#v_inputlist").show();

        }    

    });

    $("#v_inputlist").keyup(function(){

        var data = $("#v_inputlist").val();

        var offset = $("#v_inputlist").offset();  //获取相对控件的偏移位置

        $("#select_div").show().css({left:offset.left,top:offset.top+15});

        if(data && data.length>2){

            loadData();

        }

    }).blur(function(){

        $("#select_div").hide();

    });

    //执行查询

    $("#quickquerybtn").click(function(){

        if(type==1){

            var longitude = $("#v_longitude").val();

            var latitude = $("#v_latitude").val();

            if(validateTude(longitude,latitude)){

                alert(longitude+" : "+latitude);

            }

        }else{

            var data = $("#v_inputlist").val();

            if(v_trim(data)){

                alert("请输入查询内容");

                return;

            }

            //

            alert("execute query");

        }

    });

  //判断字符串是否为一串空格或空的字符串""

    function v_trim(str){

        var count=0;

        for(var i=0;i<str.length;i++){

            if(str[i]==" "){

                count++;

            }else{

                break;

            }

        }

        if(count==str.length){

            return true;

        }

        return false;

    }

    //判断经纬度 

    function validateTude(longitude,latitude){

        var exp = /^-?([0-9](\.\d+)?|[1-9]\d(\.\d+)?|[1][0-7]\d(\.\d+)?|180|180.0)$/;

        var exp2 = /^-?([0-9](\.\d+)?|[1-8]\d(\.\d+)?|90|90.0)$/;

        if (!exp.test(longitude)) {

            alert("经度输入不合法" );

            return false;

        }

        if (!exp2.test(latitude)) {

            alert("纬度输入不合法");

            return false;

        }

        return true;

    }

    //填充数据

    function loadData(div,type,param1,param2){

       /* $.ajax({

            url : "customer/findCustomers.do",

            async : true,

            data:{type:type,param1:param1,param2:param2},

            type : "POST",

            success : function(data) {

                if(data.success==true){

                    $("#"+div+" ul").html("");

                    var li="";

                    var cms = data.message;

                    for(var i=0;i<cms.length;i++){

                        li+="<li alt='"+cms[i].id+"'>"+cms[i].custname+"</li>";

                    }

                    $("#"+div+" ul").append(li);            

                    $("#select_div ul li").click(function(){

                        var text = $(this).html();

                        

                        $("#select_div").hide();

                    });

                }else{

                    alert(data.message);

                }

            }

        });*/

       

    }

});

</script>

<style type="text/css">

    .select_div{

        margin-top:6px; 

        background-color:white; 

        position: absolute;

        border:1px solid #7F9DB9; 

        width:142px;

        height: 200px;

        z-index: 100; 

        overflow: auto;

        display: none;

    }

    .select_div ul li{

        height: 20px;

        line-height: 20px;

        list-style: none;

    }

    .select_div ul li:HOVER {

        background-color: #3399FF;

    }

    .quickquery .latitude{

        display: none;

        font-size: 13px;

    }

</style>

</head>

<body>

    

     <div class="quickquery">

         <strong class="fleft">快速查询：</strong> 

         <select id="wupin_id" style="width: 145px;">

            <option value="0">查港口</option>

            <option value="1">经纬度</option>

            <option value="2" selected>查船舶</option>

            <option value="3">查地点</option>

        </select>

         <input   style="width:140px;" height="22px" type="text" id="v_inputlist">

        <span class="latitude">经度</span>

        <input   style="display:none;width:140px;" height="22px" type="text" id="v_longitude">

        <span class="latitude">纬度</span>

        <input   style="display:none; width:140px;" height="22px" type="text" id="v_latitude">  

        <input type="button" value="查询" id="quickquerybtn">   

     </div>

    

    <div class="select_div"  id="select_div">

        <ul>

            <li></li>

        </ul>

    </div>

</body>

</html>