您的位置：首页 > Web前端 > JavaScript

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

2013-06-13 17:09 706 查看

1.通过js实现单选
　

$("#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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航