DOM初体验——两个关于获取的小问题

【option的值如何获得?或者说id写在哪?】
比如,在录入一条货物信息时,需要填写“行业”一栏。这一项提供五个选择。

这里写图片描述

假如所对应的代码是:

这里写图片描述

而我现在要做的是获取到目前选中的是什么行业,
id要写在select中

js中获取就很简单:

var industry = document.getElementById('indus_sel').value;

【JS获得被选中的checkbox】

背景:多选框列表,进行批量删除订单的操作。需要获取页面上被选中的列项,然后交给php来处理。

1.首先获得页面中所有的input
2.在这些input中找到type为checkbox的
3.检查这些checkbox是否被选中
4.对于被选中的checkbox,进行value值的收集和保存

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前两篇文章中,我们已经搭建了一个基本的前端监控系统,但是我们发现,在监控页面嵌入的 iframe 中,用户无法进行前进后退操作,这对于用户体验来说是非常不友好的。因此,在本文中,我们将会实现控制 iframe 前进后退的功能。 ## 实现思路 实现控制 iframe 前进后退的功能,我们需要做以下几个步骤: 1. 在监控页面中添加前进和后退按钮 2. 监听前进和后退按钮的点击事件 3. 在 iframe 中执行前进和后退操作 4. 在监控页面中更新前进后退按钮的状态 ## 添加前进后退按钮 在监控页面的 HTML 中,我们添加两个按钮,一个用于前进操作,一个用于后退操作: ```html <button id="btn-back" disabled>后退</button> <button id="btn-forward" disabled>前进</button> ``` 这里我们给按钮设置了 `id` 属性,用于后面的 DOM 操作,同时设置了 `disabled` 属性,表示按钮默认是不可用状态。 ## 监听按钮点击事件 接下来,我们要监听按钮的点击事件,并在点击时执行相应的前进或后退操作。我们可以通过 `addEventListener` 方法来实现: ```javascript document.getElementById('btn-back').addEventListener('click', function() { window.frames['monitor-iframe'].history.back(); }); document.getElementById('btn-forward').addEventListener('click', function() { window.frames['monitor-iframe'].history.forward(); }); ``` 这里我们分别给两个按钮添加了点击事件的监听器,并在点击时分别调用了 `history.back()` 和 `history.forward()` 方法,这两个方法可以实现 iframe 的前进和后退操作。 注意,我们在调用 `history.back()` 和 `history.forward()` 方法时,使用了 `window.frames['monitor-iframe']` 来获取 iframe 对象。这里的 `monitor-iframe` 是我们在前面创建 iframe 时设置的 `name` 属性。 ## 更新按钮状态 最后,我们需要在监控页面中更新前进后退按钮的状态。我们可以通过 `history` 对象的 `length` 属性来判断当前是否可以进行前进或后退操作: ```javascript var btnBack = document.getElementById('btn-back'); var btnForward = document.getElementById('btn-forward'); window.frames['monitor-iframe'].addEventListener('load', function() { if (window.frames['monitor-iframe'].history.length > 0) { btnBack.removeAttribute('disabled'); } else { btnBack.setAttribute('disabled', true); } if (window.frames['monitor-iframe'].history.length < window.frames['monitor-iframe'].history.forward()) { btnForward.removeAttribute('disabled'); } else { btnForward.setAttribute('disabled', true); } }); ``` 这里我们通过 `addEventListener` 方法给 iframe 添加了 `load` 事件的监听器,在 iframe 加载完成后更新按钮状态。 对于前进按钮,如果当前历史记录中有可前进的记录,我们就把 `disabled` 属性移除,使按钮变为可用状态;否则,我们就把 `disabled` 属性设置为 `true`,禁用按钮。 对于后退按钮,我们需要判断当前是否可以进行后退操作。如果当前历史记录中有可前进的记录,我们就把 `disabled` 属性移除,使按钮变为可用状态;否则,我们就把 `disabled` 属性设置为 `true`,禁用按钮。 ## 总结 至此,我们已经成功实现了控制 iframe 前进后退的功能。通过本文的学习,我们不仅学会了如何在监控页面中添加前进后退按钮,还学会了如何通过 JavaScript 控制 iframe 的前进后退操作,以及如何更新按钮的状态。这些技能对于我们开发其他类似功能的应用也是非常有用的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值