【EasyUI篇】Combo自定义下拉框组件

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

20.Combo自定义下拉框组件

这组件不可以通过class方式进行定义

JSP文件

<%--Created by IntelliJ IDEA.User: ooyhaoDate: 2018/7/29 0029Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Combo</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css"><script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/Combo.js"></script><style rel="stylesheet" type="text/css"></style><script></script>
</head>
<body style="padding: 100px;"><div id="box"></div>
<div id="food"><div style="color: #99eeb8; background: #fafafa; padding: 5px;">请选择一个事物</div><div style="padding: 10px;"><input type="radio" name="food" value="01"><span>煎饼果子</span><br><input type="radio" name="food" value="02"><span>牛腩米线</span><br><input type="radio" name="food" value="03"><span>水果沙拉</span><br><input type="radio" name="food" value="04"><span>蛋黄派</span><br><input type="radio" name="food" value="05"><span>其他</span></div>
</div><br><br><br><br><button id="btn">点击</button></body>
</html>

JS文件

$(function () {$('#box').combo({required:true,multiple:true,width:150,height:30,// panelWidth:150,// panelHeight:100,//设置是否可以输入// editable:false,//设置是否禁用（禁用是不可以发送值的）disabled:false,//设置只读（只读是可以发送值的）// readonly:true,//设置是否有向下的箭头hasDownArrow:true,value:'123',//1秒之后展示// delay:1000,onShowPanel:function () {//展示下拉面板时触发// alert('onShowPanel');},onHidePanel:function () {//隐藏下拉面板时触发// alert('onHidePanel');},onChange:function () {//改变值时触发// alert('onChange');}});//添加进去$('#food').appendTo($('#box').combo('panel'));$('#food input[type=radio]').click(function () {var v = $(this).val();var s = $(this).next('span').text();//隐藏下拉面板 hidePanel$('#box').combo('setValue',v).combo('setText',s).combo('hidePanel');});//------------------ 方法列表 ---------------console.log($("#box").combo('options'));//返回下拉面板对象console.log($('#box').combo('panel'));//返回文本框对象console.log($('#box').combo('textbox'));// $('#box').combo('showPanel');$(document).click(function () {//销毁// $('#box').combo('destroy');//重新调整// $('#box').combo('resize',500);//显示下拉面板// $('#box').combo('showPanel');//隐藏下拉面板// $('#box').combo('hidePanel');//禁用启用// $('#box').combo('disable');// $('#box').combo('enable');//设置为只读// $('#box').combo('readonly',false);// $('#box').combo('validate');// alert($('#box').combo('isValid'));// $('#box').combo('clear');});$("#btn").click(function () {// $('#box').combo('reset');// alert($('#box').combo('getText'));// alert($('#box').combo('getValue'));// $('#box').combo('setText','Hello Java');//设置了值，但是下拉框没有随之改变$('#box').combo('setValue','02');});});

效果图

------------------------------------------------

关注小编微信公众号获取更多资源

【EasyUI篇】Combo自定义下拉框组件相关推荐

Combo( 自定义下拉框) 组件
本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于 ValidateBox(验证框)组件一．加载方式自定义下拉框不能通过标签的方式进行创建. <in ...
div自定义下拉框组件
因为原生的下拉框不能修改其属性,很难美化下拉框. 所以自己用div简单自定义了一下下拉框,想美化直接修改css即可 <!DOCTYPE html> <html lang=" ...
vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇
文章目录后台数据,通过el-select组件el-option如何使用v-for动态渲染问题一.效果截图: 二.代码示例 · 参考: 三.相关阅读: 后台数据,通过el-select组件el-op ...
可自定义的vue下拉框组件
创建Select.vue组件 //创建Select.vue组件<template><div class="selects"><!-- 选择框 --&g ...
自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
下拉框的value值怎么设置为变量_自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值源码 ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...

【EasyUI篇】Combo自定义下拉框组件

查看--> 全套EasyUI示例目录

20.Combo自定义下拉框组件

【EasyUI篇】Combo自定义下拉框组件相关推荐

最新文章

热门文章