js组件 - 自定义下拉框条件区间选择组件（1.0.1V）

最新推荐文章于 2024-04-13 17:27:03 发布

passport_daizi

最新推荐文章于 2024-04-13 17:27:03 发布

阅读量2.3k

点赞数

分类专栏： 03 JavaScript

本文链接：https://blog.csdn.net/kalision/article/details/9719867

版权

03 JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

用在按照区间条件进行查询的时候，比如按照日销售量为10-90件查询。

可以有两个区间，可以自定义区间。具体使用方法在js文件中有详细说明。

/*
 * Kali Custom drop-down box assembly 1.0.1
 *
 * Copyright (c) 2013 kali.z
 * 
 * Date: 2013-08-02
 * 
 */
function sjkr(){
		var k_name = document.getElementById("kdiv").getAttribute("name"); 
		var col_name = document.getElementById("kdiv").getAttribute("colname");
	    document.getElementById("kdiv").innerHTML = k_name+"<select name='sjkrsel' οnchange='checkzdy();'>" +
	   			"<option value=''>--请选择--</option>" +
	    		"<option value='100_1000'>100-1000</option>" +
	    		"<option value='1000_2000'>1000-2000</option>" +
	    		"<option value='zdy'>自定义选择</option></select>" +
	    		"<input type='hidden' name='sjkr_b' id='sjkr_b' value=''/>" +
	    		"<input type='hidden' name='sjkr_e' id='sjkr_e' value=''/>" +
	    		"<input type='hidden' name='" + col_name + "' id='sjkr' value=''/>";
	   //alert(document.getElementById("kdiv").innerHTML);
}
function checkzdy(){
	var k_name = document.getElementById("kdiv").getAttribute("name"); 
	var col_name = document.getElementById("kdiv").getAttribute("colname");
	var sel = document.getElementsByName("sjkrsel")[0];
	var selvalue = sel.options[sel.options.selectedIndex].value;
	if(selvalue == ''){
		document.getElementById("sjkr").value="";
		document.getElementById("sjkr_b").value="";
		document.getElementById("sjkr_e").value="";	
	}
	if(selvalue == '100_1000'){
		document.getElementById("sjkr").value="100,1000";
		document.getElementById("sjkr_b").value="100";
		document.getElementById("sjkr_e").value="1000";
	}
	if(selvalue == '1000_2000'){
		document.getElementById("sjkr").value="1000,2000";
		document.getElementById("sjkr_b").value="1000";
		document.getElementById("sjkr_e").value="2000";
	}
	if(selvalue == 'zdy'){
		document.getElementById("kdiv").innerHTML = k_name +
				"<input type='text' id='sjkr_b' name='sjkr_b' size='2' onChange='sjkrfocus()'/>-" +
				"<input type='text' id='sjkr_e' name='sjkr_e' size='2' onChange='sjkrfocus()'/>" +
				"<input type='hidden' name='" + col_name + "' id='sjkr' value=''/>";
	}
	//alert(document.getElementById("kdiv").innerHTML);
}
function sjkrfocus(){
	document.getElementById("sjkr").value=document.getElementById("sjkr_b").value+","+document.getElementById("sjkr_e").value;
}


/*
 * Kali 自定义下拉框条件选择组件
 * 
 * 使用说明：
 * 
 * 1:引用此js文件到页面文件中。
 * 
 * 例如：<script type="text/javascript" src="../common/js/sjkr.js"></script>
 * 
 * 2：在使用的Jsp或者其他页面中创建组件DIV层
 * 
 * 例如：<div id="kdiv" name="按剩余量查询：" colname="wkk.sjkr"></div>
 * 
 * 解释：div的
 * 				id属性不可改变。只能是kdiv，否则无法创建组件。 必须拥有此属性。
 * 				name属性为页面中下拉框的说明文字，可根据需求进行改变，可为空。必须拥有此属性。
 * 				colname属性为对应后台bean的属性名称或者数据库字段名称，还可以是在后台取值的名称。request.getParameter("colname");
 * 
 */