常见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;
　　　　}
　　}
}

 

2.验证状态是否被选

function checkRadio(radio) {
　　if (radio) {
　　　　for ( var i = 0; i < radio.length; i++) {
　　　　　　if (radio[i].checked) {
　　　　　　　　return i;
　　　　　　}
　　　　}

　　return -1;
　　}
}

 

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 "";
}

 

 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");
                        });
                    });

 　　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>

　　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);
            }
        }
    });
}

 在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>