我有一张<td>的桌子,住的是<select>的<options>.
<td>
<select>
<options>
我想创建一个对我的Django后端的请求,并单击选项的值,并在所单击的<option>行中显示主机名.
<option>
我的JavaScript可以显示<option>的值,但我不知道如何访问主机名.
$(function (e) { $(".form-select").change(function (event) { alert(this.value); //shows the Value of the selected Option for(var i = 0; i < this.options.length; i++){ //deselect the option this.options[i].selected = false; } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table"> <thead> <tr> <th scope="col">Hostname</th> <th scope="col">User</th> <th scope="col">Vulnerabilites</th> </tr> </thead> <tbody> <tr> <td class="Rechnernummer"><a href="javascript:void(0)" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" onclick="clientInfo(event);">Host001</a></td> <td class="User">User001</td> <td class="Vulnerabilites"> <select class="form-select" size="4"> <option value="2705">Security Vulnerability CVE-2018-1285 for log4net</option> <option value="73562">Security Vulnerability CVE-2022-39427 in VirtualBox</option> </select> </td> </tr> <tr> <td class="Rechnernummer"><a href="javascript:void(0)" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" onclick="clientInfo(event);">Host002</a></td> <td class="User">User002</td> <td class="Vulnerabilites"> <select class="form-select" size="4"> <option value="68069">Security Vulnerability CVE-2021-34803 for TeamViewer</option> <option value="74465">Security Vulnerability CVE-2023-21899 in VirtualBox</option> </select> </td> </tr> </tbody> </table>
您可以从事件处理程序中的"当前"元素"遍历DOM",向上遍历到公共父元素,然后向下遍历到您正在寻找的"相邻"元素.例如:
$(function (e) { $(".form-select").change(function (event) { alert(this.value); //shows the Value of the selected Option alert($(this).closest('tr').find('td.Rechnernummer a').text()); // shows the Hostname // etc. }); });
使用.closest() Select 第一个匹配的父元素(向上遍历DOM),然后.find() Select 该元素中的匹配元素(向后遍历DOM).
.closest()
.find()
微服务架构核心20讲 -〔杨波〕
零基础学Python -〔尹会生〕
软件测试52讲 -〔茹炳晟〕
Go语言从入门到实战 -〔蔡超〕
Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕
DDD实战课 -〔欧创新〕
后端存储实战课 -〔李玥〕
数据中台实战课 -〔郭忆〕
物联网开发实战 -〔郭朝斌〕
成为AI产品经理 -〔刘海丰〕
计算机基础实战课 -〔彭东〕
手把手带你搭建推荐系统 -〔黄鸿波〕
无涯教程 - ASP.Net MVC教程
无涯教程 - Arduino教程
无涯教程 - Elixir教程
无涯教程 - Erlang教程
无涯教程 - Node.js教程
无涯教程 - Django教程
无涯教程 - ES6教程
无涯教程 - TCP/IP网络编程教程