<!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: 1
3px;
}
.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: #2c
3e50;
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: #2c
3e50;
text-align: right;
font-size: 1
3px;
}
input[type="text"],
select {
width: 100%;
height: 28px;
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1
3px;
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: 1
3px;
font-weight: bold;
height: 28px;
}
.btn:hover {
background-color: #4787ed;
}
.btn-exit {
background-color: #e74c
3c;
border: 1px solid #c0
392b;
}
.btn-exit:hover {
background-color: #c0
392b;
}
.category-display {
background-color: #f8f9fa;
padding: 4px 8px;
border-radius: 4px;
border: 1px dashed #ccc;
height: 28px;
line-height: 20px;
font-size: 1
3px;
}
.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: #e
3f2fd;
}
.
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 = &#
39;&#
39;;
var
selectedCategoryPath = &#
39;&#
39;;
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": &#
39;女童装&#
39;},
{"id": "baby", "name": "婴儿装"}
]
}
]
}
]
};
// 显示分类选择窗口
function showCategoryWindow() {
document.getElementById(&#
39;overlay&#
39;).style.display = &#
39;block&#
39;;
document.getElementById(&#
39;categoryWindow&#
39;).style.display = &#
39;block&#
39;;
// 重置分类选择状态
selectedCategory = &#
39;&#
39;;
selectedCategoryPath = &#
39;&#
39;;
currentCategoryLevel = 0;
categoryHistory = [];
// 显示根目录
showCategoryLevel(categoryData);
}
// 显示指定级别的分类
function showCategoryLevel(category) {
var categoryContent = document.getElementById(&#
39;categoryContent&#
39;);
categoryContent.innerHTML = &#
39;&#
39;;
// 更新面包屑导航
updateBreadcrumb(category);
// 添加分类项
for (var i = 0; i < category.children.length; i++) {
var item = category.children[i];
var div = document.createElement(&#
39;div&#
39;);
div.className = &#
39;category-item&#
39;;
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(&#
39;breadcrumb&#
39;);
breadcrumb.innerHTML = &#
39;&#
39;;
// 添加根目录
var rootSpan = document.createElement(&#
39;span&#
39;);
rootSpan.innerHTML = &#
39;根目录&#
39;;
rootSpan.onclick = function() {
showCategoryLevel(categoryData);
currentCategoryLevel = 0;
categoryHistory = [];
};
breadcrumb.appendChild(rootSpan);
// 添加各级目录
for (var i = 1; i < categoryHistory.length; i++) {
var span = document.createElement(&#
39;span&#
39;);
span.innerHTML = &#
39; > &#
39;;
breadcrumb.appendChild(span);
var linkSpan = document.createElement(&#
39;span&#
39;);
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(&#
39;span&#
39;);
currentSpan.innerHTML = &#
39; > &#
39; + 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(&#
39;categoryContent&#
39;).getElementsByTagName(&#
39;div&#
39;);
for (var i = 0; i < items.length; i++) {
items[i].className = &#
39;category-item&#
39;;
if (items[i].innerHTML === category.name) {
items[i].className = &#
39;category-item
selected-category&#
39;;
}
}
}
}
// 获取分类路径
function getCategoryPath(category) {
var path = category.name;
var parent = findParent(categoryData, category.id);
while (parent) {
path = parent.name + &#
39; > &#
39; + 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(&#
39;请选择一个分类&#
39;);
return;
}
// 更新主窗口的分类显示
document.getElementById(&#
39;categoryDisplay&#
39;).innerHTML =
selectedCategoryPath;
// 关闭分类窗口
closeWindows();
// 打开动态输入窗口
showInputWindow();
}
// 关闭所有窗口
function closeWindows() {
document.getElementById(&#
39;overlay&#
39;).style.display = &#
39;none&#
39;;
document.getElementById(&#
39;categoryWindow&#
39;).style.display = &#
39;none&#
39;;
document.getElementById(&#
39;inputWindow&#
39;).style.display = &#
39;none&#
39;;
}
// 显示动态输入窗口
function showInputWindow() {
// 设置窗口标题
document.getElementById(&#
39;inputWindowTitle&#
39;).innerHTML =
selectedCategoryPath + &#
39; - 详细信息&#
39;;
// 根据分类生成不同的输入字段
var dynamicInputs = document.getElementById(&#
39;dynamicInputs&#
39;);
dynamicInputs.innerHTML = &#
39;&#
39;;
if (
selectedCategory === &#
39;
苹果&#
39; ||
selectedCategory === &#
39;三星&#
39; ||
selectedCategory === &#
39;华为&#
39;) {
dynamicInputs.innerHTML =
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="brand">品牌:</label>&#
39; +
&#
39; <input type="text" id="brand" value="&#
39; +
selectedCategory + &#
39;" readonly>&#
39; +
&#
39; <label for="model">型号:</label>&#
39; +
&#
39; <input type="text" id="model" placeholder="例如: iPhone 1
3">&#
39; +
&#
39;</div>&#
39; +
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="color">颜色:</label>&#
39; +
&#
39; <input type="text" id="color" placeholder="例如: 黑色">&#
39; +
&#
39; <label for="storage">存储容量:</label>&#
39; +
&#
39; <input type="text" id="storage" placeholder="例如: 128GB">&#
39; +
&#
39;</div>&#
39; +
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="price">价格:</label>&#
39; +
&#
39; <input type="text" id="price" placeholder="例如: 5999元">&#
39; +
&#
39;</div>&#
39;;
} else if (
selectedCategory === &#
39;游戏本&#
39; ||
selectedCategory === &#
39;超极本&#
39; ||
selectedCategory === &#
39;商务本&#
39;) {
dynamicInputs.innerHTML =
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="type">类型:</label>&#
39; +
&#
39; <input type="text" id="type" value="&#
39; +
selectedCategory + &#
39;" readonly>&#
39; +
&#
39; <label for="brand">品牌:</label>&#
39; +
&#
39; <input type="text" id="brand" placeholder="例如: 戴尔, 联想">&#
39; +
&#
39;</div>&#
39; +
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="cpu">处理器:</label>&#
39; +
&#
39; <input type="text" id="cpu" placeholder="例如: Intel i7">&#
39; +
&#
39; <label for="ram">内存:</label>&#
39; +
&#
39; <input type="text" id="ram" placeholder="例如: 16GB">&#
39; +
&#
39;</div>&#
39; +
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="hdd">硬盘:</label>&#
39; +
&#
39; <input type="text" id="hdd" placeholder="例如: 512GB SSD">&#
39; +
&#
39; <label for="price">价格:</label>&#
39; +
&#
39; <input type="text" id="price" placeholder="例如: 6999元">&#
39; +
&#
39;</div>&#
39;;
} else if (
selectedCategory === &#
39;沙发&#
39; ||
selectedCategory === &#
39;电视柜&#
39; ||
selectedCategory === &#
39;茶几&#
39;) {
dynamicInputs.innerHTML =
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="type">家具类型:</label>&#
39; +
&#
39; <input type="text" id="type" value="&#
39; +
selectedCategory + &#
39;" readonly>&#
39; +
&#
39; <label for="material">材质:</label>&#
39; +
&#
39; <input type="text" id="material" placeholder="例如: 实木, 皮革">&#
39; +
&#
39;</div>&#
39; +
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="color">颜色:</label>&#
39; +
&#
39; <input type="text" id="color" placeholder="例如: 棕色">&#
39; +
&#
39; <label for="size">尺寸:</label>&#
39; +
&#
39; <input type="text" id="size" placeholder="例如: 200cm x 90cm x 80cm">&#
39; +
&#
39;</div>&#
39; +
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="price">价格:</label>&#
39; +
&#
39; <input type="text" id="price" placeholder="例如: 2999元">&#
39; +
&#
39;</div>&#
39;;
} else {
// 默认输入字段
dynamicInputs.innerHTML =
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="name">名称:</label>&#
39; +
&#
39; <input type="text" id="name" value="&#
39; +
selectedCategory + &#
39;">&#
39; +
&#
39; <label for="feature1">特征:</label>&#
39; +
&#
39; <input type="text" id="feature1" placeholder="特征1">&#
39; +
&#
39;</div>&#
39; +
&#
39;<div class="input-grid">&#
39; +
&#
39; <label for="spec1">规格:</label>&#
39; +
&#
39; <input type="text" id="spec1" placeholder="规格1">&#
39; +
&#
39; <label for="price">价格:</label>&#
39; +
&#
39; <input type="text" id="price" placeholder="价格">&#
39; +
&#
39;</div>&#
39;;
}
// 显示输入窗口
document.getElementById(&#
39;overlay&#
39;).style.display = &#
39;block&#
39;;
document.getElementById(&#
39;inputWindow&#
39;).style.display = &#
39;block&#
39;;
}
// 保存详细信息
function saveDetails() {
// 收集动态输入的数据
var inputsContainer = document.getElementById(&#
39;dynamicInputs&#
39;);
var inputs = inputsContainer.getElementsByTagName(&#
39;input&#
39;);
detailData = {};
var values = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].value && inputs[i].id !== &#
39;brand&#
39; && inputs[i].id !== &#
39;type&#
39; && inputs[i].id !== &#
39;name&#
39;) {
detailData[inputs[i].id] = inputs[i].value;
values.push(inputs[i].value);
}
}
// 合并动态输入内容到主窗口的文本区域，用连字符连接
document.getElementById(&#
39;dynamicContent&#
39;).value = values.join(&#
39;-&#
39;);
// 关闭输入窗口
closeInputWindow();
}
// 关闭输入窗口
function closeInputWindow() {
document.getElementById(&#
39;overlay&#
39;).style.display = &#
39;none&#
39;;
document.getElementById(&#
39;inputWindow&#
39;).style.display = &#
39;none&#
39;;
}
// 保存数据
function saveData() {
var title = document.getElementById(&#
39;title&#
39;).value;
if (!title || !
selectedCategory) {
alert(&#
39;请填写标题并选择分类&#
39;);
return;
}
alert(&#
39;数据保存成功！&#
39;);
}
</script>
</body>
</html>
可以把主页面中的 比如作者和标题 放到同一行吗 可以调整输入框大小 想要一行两个输入框
本文介绍了如何在苹果电脑上使用Chrome浏览器时去除Select元素的圆角边框。通过设置CSS属性-webkit-appearance:button;可以实现这一效果。
扫一扫
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
