<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多级分类输入系统</title>
<HTA:APPLICATION
ID="MultiLevelInputApp"
APPLICATIONNAME="多级分类输入系统"
BORDER="thin"
BORDERSTYLE="normal"
CAPTION="yes"
ICON=""
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
VERSION="1.0"
WINDOWSTATE="normal"/>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f2f5;
color: #333;
height: 100vh;
overflow: hidden;
font-size: 13px;
}
.container {
width: 920px;
height: 520px;
margin: 15px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border: 1px solid #ccc;
overflow-y: auto;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
font-weight: bold;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
font-size: 20px;
}
.form-grid {
display: grid;
grid-template-columns: 100px 250px 100px 250px;
gap: 15px;
align-items: center;
margin-bottom: 15px;
}
label {
font-weight: bold;
color: #2c3e50;
text-align: right;
font-size: 13px;
}
input[type="text"], select {
width: 100%;
height: 28px;
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 13px;
box-sizing: border-box;
}
input[type="text"]:focus, select:focus {
border-color: #4d90fe;
outline: none;
}
.btn {
background-color: #4d90fe;
color: white;
border: 1px solid #3079ed;
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
height: 28px;
}
.btn:hover {
background-color: #4787ed;
}
.btn-exit {
background-color: #e74c3c;
border: 1px solid #c0392b;
}
.btn-exit:hover {
background-color: #c0392b;
}
.category-display {
background-color: #f8f9fa;
padding: 4px 8px;
border-radius: 4px;
border: 1px dashed #ccc;
height: 28px;
line-height: 20px;
font-size: 13px;
}
.window {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 600px;
margin-left: -300px;
margin-top: -200px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1000;
border: 2px solid #ccc;
max-height: 80%;
overflow: auto;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.category-tree {
margin-left: 10px;
}
.category-item {
margin: 5px 0;
cursor: pointer;
padding: 5px;
border-radius: 3px;
font-size: 12px;
}
.category-item:hover {
background-color: #e3f2fd;
}
.selected-category {
background-color: #bbdefb;
font-weight: bold;
}
.button-group {
margin-top: 20px;
text-align: center;
}
.breadcrumb {
margin-bottom: 10px;
font-size: 12px;
color: #666;
}
.breadcrumb span {
cursor: pointer;
color: #4d90fe;
}
.breadcrumb span:hover {
text-decoration: underline;
}
.inline-group {
display: flex;
align-items: center;
gap: 10px;
}
.input-grid {
display: grid;
grid-template-columns: 120px 200px 120px 200px;
gap: 15px;
align-items: center;
margin-bottom: 10px;
}
.input-grid label {
text-align: right;
}
.input-grid input {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>多级分类输入系统</h1>
<div class="form-grid">
<label for="title">标题:</label>
<input type="text" id="title" placeholder="请输入标题">
<label for="author">作者:</label>
<input type="text" id="author" placeholder="请输入作者">
</div>
<div class="form-grid">
<label for="date">日期:</label>
<input type="text" id="date" placeholder="请输入日期">
<label for="department">部门:</label>
<select id="department">
<option value="">请选择部门</option>
<option value="技术部">技术部</option>
<option value="销售部">销售部</option>
<option value="市场部">市场部</option>
<option value="财务部">财务部</option>
</select>
</div>
<div class="form-grid">
<label for="priority">优先级:</label>
<select id="priority">
<option value="">请选择优先级</option>
<option value="高">高</option>
<option value="中">中</option>
<option value="低">低</option>
</select>
<label for="status">状态:</label>
<select id="status">
<option value="">请选择状态</option>
<option value="新建">新建</option>
<option value="处理中">处理中</option>
<option value="已完成">已完成</option>
</select>
</div>
<div class="form-grid">
<label>分类选择:</label>
<div class="inline-group">
<div class="category-display" id="categoryDisplay">尚未选择分类</div>
<button class="btn" onclick="showCategoryWindow()">选择分类</button>
</div>
<label>动态输入内容:</label>
<input type="text" id="dynamicContent" placeholder="动态输入的内容将显示在这里">
</div>
<div class="button-group">
<button class="btn" onclick="saveData()">保存数据</button>
<button class="btn btn-exit" onclick="window.close()">退出系统</button>
</div>
</div>
<!-- 分类选择窗口 -->
<div class="overlay" id="overlay"></div>
<div class="window" id="categoryWindow">
<h2>选择分类</h2>
<div class="breadcrumb" id="breadcrumb">根目录</div>
<div id="categoryContent">
<!-- 动态生成的分类内容将在这里 -->
</div>
<div class="button-group">
<button class="btn" onclick="confirmCategory()">确定</button>
<button class="btn btn-exit" onclick="closeWindows()">取消</button>
</div>
</div>
<!-- 动态输入窗口 -->
<div class="window" id="inputWindow">
<h2 id="inputWindowTitle">详细信息输入</h2>
<div id="dynamicInputs">
<!-- 动态生成的输入字段将在这里 -->
</div>
<div class="button-group">
<button class="btn" onclick="saveDetails()">保存</button>
<button class="btn btn-exit" onclick="closeInputWindow()">取消</button>
</div>
</div>
<script language="javascript">
// 设置窗口大小
window.resizeTo(980, 600);
window.moveTo((screen.width-980)/2, (screen.height-600)/2);
var selectedCategory = '';
var selectedCategoryPath = '';
var detailData = {};
var currentCategoryLevel = 0;
var categoryHistory = [];
// 分类数据结构
var categoryData = {
"id": "root",
"name": "根目录",
"children": [
{
"id": "electronics",
"name": "电子产品",
"children": [
{
"id": "phones",
"name": "手机",
"children": [
{"id": "apple", "name": "苹果"},
{"id": "samsung", "name": "三星"},
{"id": "huawei", "name": "华为"}
]
},
{
"id": "laptops",
"name": "笔记本电脑",
"children": [
{"id": "gaming", "name": "游戏本"},
{"id": "ultrabooks", "name": "超极本"},
{"id": "business", "name": "商务本"}
]
},
{
"id": "tablets",
"name": "平板电脑",
"children": [
{"id": "ipad", "name": "iPad"},
{"id": "android", "name": "安卓平板"},
{"id": "windows", "name": "Windows平板"}
]
}
]
},
{
"id": "furniture",
"name": "家具",
"children": [
{
"id": "livingroom",
"name": "客厅家具",
"children": [
{"id": "sofa", "name": "沙发"},
{"id": "tvstand", "name": "电视柜"},
{"id": "coffeetable", "name": "茶几"}
]
},
{
"id": "bedroom",
"name": "卧室家具",
"children": [
{"id": "bed", "name": "床"},
{"id": "wardrobe", "name": "衣柜"},
{"id": "dresser", "name": "梳妆台"}
]
},
{
"id": "office",
"name": "办公家具",
"children": [
{"id": "desk", "name": "办公桌"},
{"id": "chair", "name": "办公椅"},
{"id": "cabinet", "name": "文件柜"}
]
}
]
},
{
"id": "clothing",
"name": "服装",
"children": [
{
"id": "men",
"name": "男装",
"children": [
{"id": "shirts", "name": "衬衫"},
{"id": "pants", "name": "裤子"},
{"id": "jackets", "name": "夹克"}
]
},
{
"id": "women",
"name": "女装",
"children": [
{"id": "dresses", "name": "连衣裙"},
{"id": "skirts", "name": "裙子"},
{"id": "blouses", "name": "女式衬衫"}
]
},
{
"id": "kids",
"name": "童装",
"children": [
{"id": "boys", "name": "男童装"},
{"id": "girls", "name": '女童装'},
{"id": "baby", "name": "婴儿装"}
]
}
]
}
]
};
// 显示分类选择窗口
function showCategoryWindow() {
document.getElementById('overlay').style.display = 'block';
document.getElementById('categoryWindow').style.display = 'block';
// 重置分类选择状态
selectedCategory = '';
selectedCategoryPath = '';
currentCategoryLevel = 0;
categoryHistory = [];
// 显示根目录
showCategoryLevel(categoryData);
}
// 显示指定级别的分类
function showCategoryLevel(category) {
var categoryContent = document.getElementById('categoryContent');
categoryContent.innerHTML = '';
// 更新面包屑导航
updateBreadcrumb(category);
// 添加分类项
for (var i = 0; i < category.children.length; i++) {
var item = category.children[i];
var div = document.createElement('div');
div.className = 'category-item';
div.innerHTML = item.name;
div.onclick = (function(item) {
return function() {
selectCategory(item);
};
})(item);
categoryContent.appendChild(div);
}
// 记录当前级别
currentCategoryLevel++;
categoryHistory.push(category);
}
// 更新面包屑导航
function updateBreadcrumb(category) {
var breadcrumb = document.getElementById('breadcrumb');
breadcrumb.innerHTML = '';
// 添加根目录
var rootSpan = document.createElement('span');
rootSpan.innerHTML = '根目录';
rootSpan.onclick = function() {
showCategoryLevel(categoryData);
currentCategoryLevel = 0;
categoryHistory = [];
};
breadcrumb.appendChild(rootSpan);
// 添加各级目录
for (var i = 1; i < categoryHistory.length; i++) {
var span = document.createElement('span');
span.innerHTML = ' > ';
breadcrumb.appendChild(span);
var linkSpan = document.createElement('span');
linkSpan.innerHTML = categoryHistory[i].name;
linkSpan.onclick = (function(level, cat) {
return function() {
// 回退到指定级别
var tempHistory = categoryHistory.slice(0, level);
currentCategoryLevel = level;
showCategoryLevel(cat);
};
})(i, categoryHistory[i]);
breadcrumb.appendChild(linkSpan);
}
// 添加当前目录
if (categoryHistory.length > 0) {
var currentSpan = document.createElement('span');
currentSpan.innerHTML = ' > ' + category.name;
breadcrumb.appendChild(currentSpan);
}
}
// 选择分类
function selectCategory(category) {
// 如果有子分类，显示子分类
if (category.children && category.children.length > 0) {
showCategoryLevel(category);
} else {
// 否则选择该分类
selectedCategory = category.name;
selectedCategoryPath = getCategoryPath(category);
// 高亮显示选中的分类
var items = document.getElementById('categoryContent').getElementsByTagName('div');
for (var i = 0; i < items.length; i++) {
items[i].className = 'category-item';
if (items[i].innerHTML === category.name) {
items[i].className = 'category-item selected-category';
}
}
}
}
// 获取分类路径
function getCategoryPath(category) {
var path = category.name;
var parent = findParent(categoryData, category.id);
while (parent) {
path = parent.name + ' > ' + path;
parent = findParent(categoryData, parent.id);
}
return path;
}
// 查找父分类
function findParent(root, id) {
if (root.children) {
for (var i = 0; i < root.children.length; i++) {
if (root.children[i].id === id) {
return root;
}
var found = findParent(root.children[i], id);
if (found) return found;
}
}
return null;
}
// 确认分类选择
function confirmCategory() {
if (!selectedCategory) {
alert('请选择一个分类');
return;
}
// 更新主窗口的分类显示
document.getElementById('categoryDisplay').innerHTML = selectedCategoryPath;
// 关闭分类窗口
closeWindows();
// 打开动态输入窗口
showInputWindow();
}
// 关闭所有窗口
function closeWindows() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('categoryWindow').style.display = 'none';
document.getElementById('inputWindow').style.display = 'none';
}
// 显示动态输入窗口
function showInputWindow() {
// 设置窗口标题
document.getElementById('inputWindowTitle').innerHTML = selectedCategoryPath + ' - 详细信息';
// 根据分类生成不同的输入字段
var dynamicInputs = document.getElementById('dynamicInputs');
dynamicInputs.innerHTML = '';
if (selectedCategory === '苹果' || selectedCategory === '三星' || selectedCategory === '华为') {
dynamicInputs.innerHTML =
'<div class="input-grid">' +
' <label for="brand">品牌:</label>' +
' <input type="text" id="brand" value="' + selectedCategory + '" readonly>' +
' <label for="model">型号:</label>' +
' <input type="text" id="model" placeholder="例如: iPhone 13">' +
'</div>' +
'<div class="input-grid">' +
' <label for="color">颜色:</label>' +
' <input type="text" id="color" placeholder="例如: 黑色">' +
' <label for="storage">存储容量:</label>' +
' <input type="text" id="storage" placeholder="例如: 128GB">' +
'</div>' +
'<div class="input-grid">' +
' <label for="price">价格:</label>' +
' <input type="text" id="price" placeholder="例如: 5999元">' +
'</div>';
} else if (selectedCategory === '游戏本' || selectedCategory === '超极本' || selectedCategory === '商务本') {
dynamicInputs.innerHTML =
'<div class="input-grid">' +
' <label for="type">类型:</label>' +
' <input type="text" id="type" value="' + selectedCategory + '" readonly>' +
' <label for="brand">品牌:</label>' +
' <input type="text" id="brand" placeholder="例如: 戴尔, 联想">' +
'</div>' +
'<div class="input-grid">' +
' <label for="cpu">处理器:</label>' +
' <input type="text" id="cpu" placeholder="例如: Intel i7">' +
' <label for="ram">内存:</label>' +
' <input type="text" id="ram" placeholder="例如: 16GB">' +
'</div>' +
'<div class="input-grid">' +
' <label for="hdd">硬盘:</label>' +
' <input type="text" id="hdd" placeholder="例如: 512GB SSD">' +
' <label for="price">价格:</label>' +
' <input type="text" id="price" placeholder="例如: 6999元">' +
'</div>';
} else if (selectedCategory === '沙发' || selectedCategory === '电视柜' || selectedCategory === '茶几') {
dynamicInputs.innerHTML =
'<div class="input-grid">' +
' <label for="type">家具类型:</label>' +
' <input type="text" id="type" value="' + selectedCategory + '" readonly>' +
' <label for="material">材质:</label>' +
' <input type="text" id="material" placeholder="例如: 实木, 皮革">' +
'</div>' +
'<div class="input-grid">' +
' <label for="color">颜色:</label>' +
' <input type="text" id="color" placeholder="例如: 棕色">' +
' <label for="size">尺寸:</label>' +
' <input type="text" id="size" placeholder="例如: 200cm x 90cm x 80cm">' +
'</div>' +
'<div class="input-grid">' +
' <label for="price">价格:</label>' +
' <input type="text" id="price" placeholder="例如: 2999元">' +
'</div>';
} else {
// 默认输入字段
dynamicInputs.innerHTML =
'<div class="input-grid">' +
' <label for="name">名称:</label>' +
' <input type="text" id="name" value="' + selectedCategory + '">' +
' <label for="feature1">特征:</label>' +
' <input type="text" id="feature1" placeholder="特征1">' +
'</div>' +
'<div class="input-grid">' +
' <label for="spec1">规格:</label>' +
' <input type="text" id="spec1" placeholder="规格1">' +
' <label for="price">价格:</label>' +
' <input type="text" id="price" placeholder="价格">' +
'</div>';
}
// 显示输入窗口
document.getElementById('overlay').style.display = 'block';
document.getElementById('inputWindow').style.display = 'block';
}
// 保存详细信息
function saveDetails() {
// 收集动态输入的数据
var inputsContainer = document.getElementById('dynamicInputs');
var inputs = inputsContainer.getElementsByTagName('input');
detailData = {};
var values = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].value && inputs[i].id !== 'brand' && inputs[i].id !== 'type' && inputs[i].id !== 'name') {
detailData[inputs[i].id] = inputs[i].value;
values.push(inputs[i].value);
}
}
// 合并动态输入内容到主窗口的文本区域，用连字符连接
document.getElementById('dynamicContent').value = values.join('-');
// 关闭输入窗口
closeInputWindow();
}
// 关闭输入窗口
function closeInputWindow() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('inputWindow').style.display = 'none';
}
// 保存数据
function saveData() {
var title = document.getElementById('title').value;
if (!title || !selectedCategory) {
alert('请填写标题并选择分类');
return;
}
alert('数据保存成功！');
}
</script>
</body>
</html>
可以把主页面中的 比如作者和标题 放到同一行吗 可以调整输入框大小 想要一行两个输入框
HTML下拉选框布局技巧
扫一扫
7211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
