YouTip-- Learning not just technology, but dreams!
Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks
jQuery EasyUI Tutorial
jQuery EasyUI Tutorial
jQuery EasyUI Introduction
jEasyUI Applications
jEasyUI Creating CRUD Application
jEasyUI Creating CRUD DataGrid
jEasyUI Form CRUD Application
jEasyUI Creating RSS Reader
jEasyUI Drag and Drop
jEasyUI Basic Drag and Drop
jEasyUI Creating Drag and Drop Shopping Cart
jEasyUI Creating School Timetable
jEasyUI Menu and Button
jEasyUI Creating Simple Menu
jEasyUI Creating Link Button
jEasyUI Creating Menu Button
jEasyUI Creating Split Button
jEasyUI Layout
jEasyUI Creating Border Layout
jEasyUI Creating Complex Layout
jEasyUI Creating Accordion
jEasyUI Creating Tabs
jEasyUI Dynamically Adding Tabs
jEasyUI Adding Auto-play Tabs
jEasyUI Creating XP-style Left Panel
jEasyUI DataGrid
jEasyUI Converting HTML Table to DataGrid
jEasyUI Getting Selected Row Data
jEasyUI Adding Search Functionality
jEasyUI Adding Toolbar
jEasyUI Creating Complex Toolbar
jEasyUI Setting Frozen Columns
jEasyUI Dynamically Changing Columns
jEasyUI Formatting Columns
jEasyUI Setting Sorting
jEasyUI Custom Sorting
jEasyUI Creating Column Group
jEasyUI Adding Checkbox
jEasyUI Custom Pagination
jEasyUI Enabling Row Editing
jEasyUI Extending Editors
jEasyUI Column Calculation
jEasyUI Merging Cells
jEasyUI Creating Custom View
jEasyUI Creating Footer Summary
jEasyUI Setting Row Background Color Conditionally
jEasyUI Creating PropertyGrid
jEasyUI Expanding Row to Show Details
jEasyUI Creating SubGrid
jEasyUI Displaying Large Data
jEasyUI Adding Pagination Component
jEasyUI Window
jEasyUI Creating Simple Window
jEasyUI Customizing Window Toolbar
jEasyUI Window and Layout
jEasyUI Creating Dialog
jEasyUI Customizing Dialog
jEasyUI Tree
jEasyUI Creating Tree with Markup
jEasyUI Creating Async Tree
jEasyUI Adding Nodes to Tree
jEasyUI Creating Tree with Checkbox
jEasyUI Tree Drag and Drop Control
jEasyUI Tree Loading Parent/Child Nodes
jEasyUI Creating Basic TreeGrid
jEasyUI Creating Complex TreeGrid
jEasyUI TreeGrid Dynamic Loading
jEasyUI TreeGrid Adding Pagination
jEasyUI TreeGrid Lazy Loading Nodes
jEasyUI Form
jEasyUI Creating Async Submit Form
jEasyUI Form Validation
jEasyUI Creating ComboTree
jEasyUI Formatting ComboBox
jEasyUI Filtering DataGrid in ComboBox
jEasyUI Reference
jQuery EasyUI Plugins
jQuery EasyUI Extensions
jQuery EasyUI Form – Form Validation
jQuery EasyUI Form – Formatting ComboBox
Deep Dive
Programming
Computers & Electronics
Computer Science
Technical Reference
General Reference
Operating Systems
Data Management
Scripting Languages
Forms, Guides & Templates
jQuery EasyUI Form - Creating a ComboTree
A ComboTree is a dropdown box (ComboBox) with a tree structure (Tree) below it. It can be used as a form field and submitted to a remote server.
In this tutorial, we will create a registration form with name, address, and city fields. The city field is a ComboTree field where users can open a tree panel and select a specific city.
Creating the Form
<div id="dlg" class="easyui-dialog" style="width:500px;height:250px;padding:10px 30px;"
title="Register" buttons="#dlg-buttons">
<h2>Account Information</h2>
<form id="ff" method="post">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" style="width:350px;"/></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" style="width:350px;"/></td>
</tr>
<tr>
<td>City:</td>
<td><select class="easyui-combotree" url="data/city_data.json" name="city" style="width:156px;"/></td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savereg()">Submit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>From the code above, we can see that we set a url attribute for a ComboTree field named 'city', which can retrieve tree data from a remote server. Note that this field has a style name 'easyui-combotree', so we don't need to write any JS code; the ComboTree field will be rendered automatically.
Download jQuery EasyUI Example
jeasyui-form-form2.zip
jQuery EasyUI Form – Form Validation
jQuery EasyUI Form – Formatting ComboBox
ByteArk Coding Plan
Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax. Official supply, stable and reliable.
Configuration Guide
¥9.9
/ month
Subscribe Now
iFlytek Star Coding Plan
Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform.
Configuration Guide
¥3.9
/ month
Subscribe Now
Click to Share Notes
Category Navigation
Python / Data Science
AI / Intelligent Development
Front-end Development
Back-end Development
Database
Mobile Development
DevOps / Engineering
Programming Languages
Computer Fundamentals
XML / Web Service
.NET
Website Building
Advertisement
jQuery EasyUI Tutorial
jQuery EasyUI Tutorial
jQuery EasyUI Introduction
jEasyUI Applications
jEasyUI Creating CRUD Application
jEasyUI Creating CRUD DataGrid
jEasyUI Form CRUD Application
jEasyUI Creating RSS Reader
jEasyUI Drag and Drop
jEasyUI Basic Drag and Drop
jEasyUI Creating Drag and Drop Shopping Cart
jEasyUI Creating School Timetable
jEasyUI Menu and Button
jEasyUI Creating Simple Menu
jEasyUI Creating Link Button
jEasyUI Creating Menu Button
jEasyUI Creating Split Button
jEasyUI Layout
jEasyUI Creating Border Layout
jEasyUI Creating Complex Layout
jEasyUI Creating Accordion
jEasyUI Creating Tabs
jEasyUI Dynamically Adding Tabs
jEasyUI Adding Auto-play Tabs
jEasyUI Creating XP-style Left Panel
jEasyUI DataGrid
jEasyUI Converting HTML Table to DataGrid
jEasyUI Getting Selected Row Data
jEasyUI Adding Search Functionality
jEasyUI Adding Toolbar
jEasyUI Creating Complex Toolbar
jEasyUI Setting Frozen Columns
jEasyUI Dynamically Changing Columns
jEasyUI Formatting Columns
jEasyUI Setting Sorting
jEasyUI Custom Sorting
jEasyUI Creating Column Group
jEasyUI Adding Checkbox
jEasyUI Custom Pagination
jEasyUI Enabling Row Editing
jEasyUI Extending Editors
jEasyUI Column Calculation
jEasyUI Merging Cells
jEasyUI Creating Custom View
jEasyUI Creating Footer Summary
jEasyUI Setting Row Background Color Conditionally
jEasyUI Creating PropertyGrid
jEasyUI Expanding Row to Show Details
jEasyUI Creating SubGrid
jEasyUI Displaying Large Data
jEasyUI Adding Pagination Component
jEasyUI Window
jEasyUI Creating Simple Window
jEasyUI Customizing Window Toolbar
jEasyUI Window and Layout
jEasyUI Creating Dialog
jEasyUI Customizing Dialog
jEasyUI Tree
jEasyUI Creating Tree with Markup
jEasyUI Creating Async Tree
jEasyUI Adding Nodes to Tree
jEasyUI Creating Tree with Checkbox
jEasyUI Tree Drag and Drop Control
jEasyUI Tree Loading Parent/Child Nodes
jEasyUI Creating Basic TreeGrid
jEasyUI Creating Complex TreeGrid
jEasyUI TreeGrid Dynamic Loading
jEasyUI TreeGrid Adding Pagination
jEasyUI TreeGrid Lazy Loading Nodes
jEasyUI Form
jEasyUI Creating Async Submit Form
jEasyUI Form Validation
jEasyUI Creating ComboTree
jEasyUI Formatting ComboBox
jEasyUI Filtering DataGrid in ComboBox
jEasyUI Reference
jQuery EasyUI Plugins
jQuery EasyUI Extensions
Online Examples
·HTML Examples
·CSS Examples
·JavaScript Examples
·Ajax Examples
·jQuery Examples
·XML Examples
·Java Examples
Character Sets & Tools
· HTML Character Set Settings
· HTML ASCII Character Set
· JS Obfuscation/Encryption
· PNG/JPEG Image Compression
· HTML Color Picker
· JSON Formatting Tool
· Random Number Generator
Latest Updates
· Large Model Multimodal (M...
· Codex Advanced Configuration
· AI Agent Terminology
· ZCode Getting Started Tutorial
· Loop Engineerin...
· Claude Code Us...
· Claude Code Us...
Site Information
· Feedback
· Disclaimer
· About Us
· Article Archive
Follow WeChat
My Favorites
Bookmark Article
Browsing History
Clear All
No records yet