DHtmlX中combo的基础使用

最新推荐文章于 2022-08-29 08:23:55 发布

zbbzb

最新推荐文章于 2022-08-29 08:23:55 发布

阅读量2.8k

点赞数 1

分类专栏： dhtmlx学习

本文链接：https://blog.csdn.net/zbbzb/article/details/77461273

版权

dhtmlx学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DHtmlX中combo的使用

combo:比select高级的下拉框

需要的资源：
官方下载地址

参考文档
官方文档,流程

3步创建简单combo

1.连接样式和脚本

<link rel="STYLESHEET" type="text/css" href="dhtmlxCombo/dhtmlxcombo.css" >
<script type="text/javascript" src="dhtmlxCombo/dhtmlxcombo.js"></script>

把css和js放在dhtmlxCombo文件夹下

(也可以直接连CDN,也就是连接官网上，只需要改 href=“http://cdn.dhtmlx.com/edge/dhtmlx.css”
src=“http://cdn.dhtmlx.com/edge/dhtmlx.js”
)

2.body定义容器(通常用div,select也可以)

<select  id="combo_1" name="combo_1">
    <option value="1">a00</option>
    <option value="2">a01</option>
</select>

或

<div id="combo_1" name="combo_1"></div>

3.根据id创建combo

<script type="text/javascript">
  //当容器为select时
  //var myCombo = dhtmlXComboFromSelect("combo_1","combo_1");
  //当容器为div时
  var myCombo = new dhtmlXCombo("combo_1","combo_1");
</script>

**注:**一定要在容器加载完后再new combo

Combo构造器

new dhtmlXCombo(parent,name,width,type,index,filter,xml,readonly);

parent HTML元素的id，它将用作用途·父类(或对象本身)
name HTML元素的name
width combo的宽度,像素(px)为单位(String)
type combo选项使用的类型(可选)
index
filter
xml
readonly

加载数据

用combo.addOption(value,label,css,img_src);

value (String) 选项的id
label (String)选项的值
css (String)附加的样式(可选)
img_src (String)选项图标图像的路径

demo

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 
	<link rel="STYLESHEET" type="text/css" href="dhtmlxCombo/dhtmlxcombo.css" >
	<script type="text/javascript" src="dhtmlxCombo/dhtmlxcombo.js"></script>
	 -->
	<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
	<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>
	
	<style type="text/css">
		body {
			background-color:#112233		
		}	
	</style>
	
	<script type="text/javascript">
	
	function init(){
		//普通combo+带样式
		var myCombo = new dhtmlXCombo("combo_1",null,"100px");
		myCombo.addOption("1","text1",null,null,true);
		myCombo.addOption("2","text2");
		myCombo.addOption("3","text3","color:red");
		
		//加图片combo
		var myCombo1 = new dhtmlXCombo("combo_2",null,"100px","image");
		myCombo1.addOption("1","text1",null,"imgs/1.png",true);
		myCombo1.addOption("2","text2",null,"imgs/2.png");
		myCombo1.addOption("3","text3",null,"imgs/3.png");
		
		//加checkbox的combo
		var myCombo2 = new dhtmlXCombo("combo_3",null,"100px","checkbox");
		myCombo2.addOption("1","text1",null,null,true);
		myCombo2.addOption("2","text2");
		myCombo2.addOption("3","text3");
		
		//combo添加数据另一种格式
		var myCombo = new dhtmlXCombo("combo_4",null,"100px");
		myCombo.addOption([
			["1","text1",null,null,true],
			["2","text2"],
			["3","text3"]
		]);
		
	}
		
	</script>
	
</head>
<body onload="init();">
	<h3>普通combo+带样式</h3>
	<div id="combo_1"></div>
	<h3>加图片combo</h3>
	<div id="combo_2"></div>
	<h3>加checkbox的combo</h3>
	<div id="combo_3"></div>
	<h3>combo添加数据另一种格式</h3>
	<div id="combo_4"></div>
	

</body>
</html>

图片位置:

zbbzb

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DHtmlX中combo的基础使用

DHtmlX中combo的使用combo:比select高级的下拉框需要的资源：官方下载地址参考文档官方文档,流程3步创建简单combo1.连接样式和脚本<link rel="STYLESHEET" type="text/css" href="dhtmlxCombo/dhtmlxcombo.css" ><script type="text/javascript" src="dhtmlxCo
复制链接

扫一扫