本文详细介绍了如何使用纯j*ascript根据元素的自定义属性值来查找特定dom元素，并提取其文本内容，进而动态更新页面上另一个关联元素的文本及自定义属性。通过queryselector、closest和setattribute等dom api，实现下拉菜单选择项与显示按钮的同步更新，提升用户界面交互性。
在现代Web应用开发中，动态更新用户界面（UI）是常见的需求。例如，当用户在一个自定义下拉菜单中选择一个项时，需要将所选项的文本同步显示在下拉菜单的触发按钮上。本教程将指导您如何利用J*aScript的DOM操作能力，实现这一功能：根据一个外部触发器提供的ID，查找具有匹配自定义属性值的元素，提取其文本，并用该文本更新另一个元素的显示内容和自定义属性。
我们首先分析涉及的HTML结构。该结构模拟了一个自定义的下拉选择器，其中包含：
<select name="client" class="select form-select" id="id_client" style="display : none ">
<option value="1109">Charles</option>
<!-- ... 其他选项 ... -->
</select><button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Charles
</button><button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button> <!-- ... 其他选项 ... -->
<button onclick="myFunc(this.id)" id="1106">Select client (1106)</button>
我们的目标是，当外部按钮被点击并传入ID（例如1106）时，找到 data-dselect-value="1106" 的下拉菜单项（即“Robert”），然后将下拉菜单触发按钮的文本和 data-dselect-text 属性都更新为“Robert”。
我们将通过一个名为 myFunc 的J*aScript函数来处理这个逻辑。
当外部按钮被点击时，它会调用 myFunc(this.id)，将自身的 id 属性值作为参数 clicked_id 传递给函数。
function myFunc(clicked_id) {
// clicked_id 即为 "1106"
}使用 document.querySelector() 结合属性选择器来查找具有匹配 data-dselect-value 属性的下拉菜单项。
var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
// 例如，当 clicked_id 为 "1106" 时，会找到 <button class="dropdown-item" data-dselect-value="1106">Robert</button>这里的 [attribute="value"] 是一个强大的CSS选择器，允许我们精确地根据元素的某个属性值来定位元素。
Jaaz
开源的AI设计智能体
216
查看详情
一旦找到了目标元素 elem，我们可以通过其 innerText 属性获取其包含的文本内容。
var text = elem.innerText; // 在上述例子中，text 将会是 "Robert"
现在我们需要找到那个需要更新的下拉菜单触发按钮。这个按钮与我们找到的 elem（下拉菜单项）不在同一个父级下，但它们都位于同一个 .dropdown 容器内。我们可以通过以下两步来定位：
var parent = elem.closest(".dropdown"); // 找到最近的 .dropdown 祖先
var button = parent.querySelector("[data-bs-toggle=dropdown]"); // 在该祖先内查找目标按钮最后一步是更新目标按钮的文本内容和 data-dselect-text 属性。
button.innerText = text; // 将按钮的显示文本更新为 "Robert"
button.setAttribute('data-dselect-text', text); // 将 data-dselect-text 属性更新为 "Robert"将以上步骤整合到 myFunc 函数中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Dropdown Update</title>
<!-- 引入 Bootstrap CSS，如果您的项目使用了它 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 示例中隐藏了原始select，但保留了自定义下拉菜单的样式 */
.select { display: none; } /* 隐藏原始 select */
.dropdown-menu { display: block; position: static; } /* 为了示例方便，让菜单项始终可见 */
.dselect-items { max-height: 150px; overflow-y: auto; }
</style>
</head>
<body>
<select name="client" class="select form-select" id="id_client">
<option value="1109">Charles</option>
<option value="1108">Fred</option>
<option value="1107">Lionel</option>
<option value="1106">Robert</option>
<option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
<button class="form-select" data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Charles
</button>
<div class="dropdown-menu">
<div class="d-flex flex-column">
<input type="text" class="form-control" placeholder="Search" autofocus="">
<div class="dselect-items">
<button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
<button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
<button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
<button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
<button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
<p style="margin-top: 20px;">点击下面的按钮来选择客户：</p>
<button onclick="myFunc(this.id)" id="1106" class="btn btn-primary">Select client (1106)</button>
<button onclick="myFunc(this.id)" id="1105" class="btn btn-secondary">Select client (1105)</button>
<script>
function myFunc(clicked_id) {
// 1. 根据传入的ID查找对应的下拉菜单项
var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
// 2. 检查元素是否存在，避免空指针错误
if (!elem) {
console.warn('未找到匹配 data-dselect-value="' + clicked_id + '" 的元素。');
return;
}
// 3. 提取该菜单项的文本
var text = elem.innerText;
// 4. 向上查找最近的 .dropdown 父级容器
var parent = elem.closest(".dropdown");
// 5. 检查父级容器是否存在
if (!parent) {
console.warn('未找到 .dropdown 父级容器。');
return;
}
// 6. 在父级容器内查找目标触发按钮
var button = parent.querySelector("[data-bs-toggle=dropdown]");
// 7. 检查目标按钮是否存在
if (!button) {
console.warn('未找到 data-bs-toggle="dropdown" 的按钮。');
return;
}
// 8. 更新目标按钮的文本和自定义属性
button.innerText = text;
button.setAttribute('data-dselect-text', text);
}
// 示例中 dselectUpdate 和 dselectSearch 函数未提供，这里仅为示意
function dselectUpdate(item, wrapperClass, buttonClass) {
console.log('dselectUpdate called for:', item.innerText);
myFunc(item.dataset.dselectValue); // 模拟更新
}
function dselectSearch(event, input, wrapperClass, buttonClass, allowNew) {
console.log('dselectSearch called with:', input.value);
}
</script>
</body>
</html>通过本教程，我们学习了如何利用J*aScript强大的DOM操作能力，根据自定义属性值动态查找元素、提取信息并更新页面上的其他元素。掌握 querySelector、closest 和 setAttribute 等核心API，是实现复杂、交互式Web界面的基础。这种模式在处理自定义下拉菜单、标签页切换、数据筛选等多种场景中都非常有用，能够显著提升用户体验和界面的动态响应能力。
以上就是J*aScript DOM操作：根据自定义属性值动态更新UI元素的详细内容，更多请关注其它相关文章！
# 第一个
# 佛山seo优化团队
# 怎么优化加盟网站推广
# 重庆seo软件价格查询
# 联通号卡营销推广平台
# cds对seo的影响
# 龙岩网站建设厂家黄页
# 网站推广网站图片
# 北京短视频seo源码
# 厦门网站推广作用
# 福建短视频营销推广商城
# 网页设计
# 双击
# 我们可以
# 找不到
# 未找到
# css
# 是否存在
# 菜单项
# 选择器
# 自定义
# 应用开发
# cdn
# app
# npm
# html5
# bootstrap
# js
# html
# java
# javascript
相关栏目：
【
Google疑问12 】
【
Facebook疑问10 】
【
优化推广96088 】
【
技术知识133117 】
【
IDC资讯59369 】
【
网络运营7196 】
【
IT资讯61894 】
相关推荐：
PDF文件去水印平台入口 PDF水印删除网址
poki官网最新入口 poki小游戏大全入口
Retrofit根路径POST请求：@POST("/") 的应用与解析
b站怎么设置动态仅粉丝可见_b站动态粉丝可见设置方法
德邦快递收费标准详解
VS Code如何设置默认配置
教育查询官方网站入口 教育个人档案查询免费官网
钉钉任务无法提醒如何处理 钉钉任务提醒优化方法
米侠浏览器插件无法启用怎么办 米侠浏览器扩展兼容性修复
可米酷漫画在线阅读入口_ 可米酷漫画官网直达链接
Vue 3中独立响应式实例的创建与应用
智慧团建活动报名入口 智慧团建活动报名入口手机端官网
Lar*el如何创建自定义的辅助函数（Helpers）_Lar*el全局函数定义与加载方法
苹果自助维修计划支持哪些设备机型
修复UI元素交互障碍：从“开始”按钮到信息框的平滑过渡实现
J*aScript与CSS动画：实现平滑顺序淡入淡出效果并解决显示冲突
虫虫漫画排行榜单入口_虫虫漫画编辑推荐入口
《随手记》启用语音备注方法
PHP页面重载时变量值不重置的实现方法
申通快递查询 申通物流快递单实时查询入口
电脑视频号|直播|如何分享屏幕
CSS如何在页面中引入重置样式_使用Normalize.css或Reset.css统一浏览器默认样式
支付宝登录刷脸不是本人如何解决
百度小说看书时如何翻页_百度小说手动翻页与自动翻页设置
search中maxlength属性用法解析
百度网盘网页入口链接分享 百度网盘官网入口网页登录
照片整理的黄金法则是怎样的？ 理解“收集-筛选-归档-备份”四步流程
如何在mysql中比较InnoDB和MyISAM区别
QQ网站入口直接登录 QQ官方正版登录页面
优化 React onClick 事件处理：函数引用与箭头函数的对比
手机远程连接电脑方法
c++20的指定初始化(Designated Initializers)怎么用_c++ C风格结构体初始化
mysql离线安装后如何启动_mysql离线安装完成后启动服务的方法
Python实战：高效处理实时数据流中的最小/最大值
京东物流快递破损了怎么办_京东快递破损理赔流程
《大周列国志》皇帝律令功能介绍
Sublime怎么配置YAML文件格式化_Sublime YAML Formatter插件教程
C++如何实现单例模式_C++线程安全的单例模式写法
为什么XML解析器对大小写敏感？ 理解XML规范中的大小写规则与最佳实践
圆通快递包裹轨迹查询 圆通速递快件实时位置跟踪
海外搜索引擎推广效果怎么样,怎么分析效果！
京东快递物流信息不更新怎么办_物流停滞原因与处理方法
虫虫助手如何更新游戏
《伊瑟》凶影追缉库卢鲁boss攻略
使用CSS :has() 选择器实现父元素样式控制：从子元素反向应用样式
PPT页面尺寸怎么修改 PPT自定义幻灯片大小与方向设置【教程】
优化Leaflet弹出层图片显示：条件渲染策略
传统曲艺莲花落的表演形式是
向日葵客户端怎么进行语音通话_向日葵客户端语音通话功能使用方法
哔哩哔哩黑名单怎么查看
2025-10-27
运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。