zoukankan      html  css  js  c++  java
  • 常见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});
                                $("#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="140px;position:absolute;left:0px;margin: 0px;" type="text" id="v_inputCustomer">
                                    <img style="position:absolute;left:140px; height:22px; 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=" 145px;">
                <option value="0">查港口</option>
                <option value="1">经纬度</option>
                <option value="2" selected>查船舶</option>
                <option value="3">查地点</option>
            </select>
             <input   style="140px;" height="22px" type="text" id="v_inputlist">
            <span class="latitude">经度</span>
            <input   style="display:none;140px;" height="22px" type="text" id="v_longitude">
            <span class="latitude">纬度</span>
            <input   style="display:none; 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>
  • 相关阅读:
    uva 10369 Arctic Network
    uvalive 5834 Genghis Khan The Conqueror
    uvalive 4848 Tour Belt
    uvalive 4960 Sensor Network
    codeforces 798c Mike And Gcd Problem
    codeforces 796c Bank Hacking
    codeforces 768c Jon Snow And His Favourite Number
    hdu 1114 Piggy-Bank
    poj 1276 Cash Machine
    bzoj 2423 最长公共子序列
  • 原文地址:https://www.cnblogs.com/lbangel/p/3134311.html
Copyright © 2011-2022 走看看