两个下拉框的联动功能实现

最新推荐文章于 2024-06-16 01:11:10 发布
最新推荐文章于 2024-06-16 01:11:10 发布
阅读量2.4k 收藏
点赞数
分类专栏： 网站建设 文章标签： generator xhtml html function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freejs/article/details/3273696
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="../js/prototype.js"></script>
</head>

<body>
<table>
<tr>
<td><label>开始时间</label></td>
<td>
<select name="fromTime" οnchange="cs_set_first_time();"><option value="0">13:00</option>
<option value="1">13:30</option>
<option value="2">14:00</option>
<option value="3">14:30</option>
<option value="4">15:00</option>
<option value="5">15:30</option>
<option value="6">16:00</option>
<option value="7">16:30</option>
<option value="8">17:00</option>
<option value="9">17:30</option>
<option value="10">18:00</option>
<option value="11">18:30</option>
<option value="12">19:00</option>
<option value="13">19:30</option>
<option value="14">20:00</option>
<option value="15">20:30</option>
<option value="17">21:30</option>
<option value="16">21:00</option>
<option value="19">22:30</option>
<option value="18">22:00</option>
<option value="20">23:00</option></select>

</td>
</tr>
<tr>
<td><label>结束时间</label></td>
<td>
<select name="toTime"><option value="0">13:00</option>
<option value="1">13:30</option>
<option value="2">14:00</option>
<option value="3">14:30</option>
<option value="4">15:00</option>
<option value="5">15:30</option>
<option value="6">16:00</option>
<option value="7">16:30</option>
<option value="8">17:00</option>
<option value="9">17:30</option>
<option value="10">18:00</option>
<option value="11">18:30</option>
<option value="12">19:00</option>
<option value="13">19:30</option>
<option value="14">20:00</option>
<option value="15">20:30</option>
<option value="17">21:30</option>
<option value="16">21:00</option>
<option value="19">22:30</option>
<option value="18">22:00</option>
<option value="20">23:00</option></select>
</td>
</tr>
</table>

<script type="text/javascript">
<!--
function cs_set_first_time(){
$(toTime).value=parseInt($F(fromTime))+2
}
//-->
</script>
</body>
</html>
piperzero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两个下拉框联动的实现
qq_43681933的博客
11-11 1334
两个下拉框联动的实现 1.只写一个查询 var flag = '{#flag#}'; app.info(flag); if(flag == '0'){ /* 个人 */ app.output('select t.item_name AS D,T.item_code AS V from rdm.t_dict_entry t where t.dict_code = \'DM1304\' and T.ITEM_CODE = \'1\' '); }else if(flag == '1'){ /* 机构 */
C#省份城市下拉框联动简单实现方法
01-21
本文实例讲述了C#省份城市下拉框联动简单实现方法。分享给大家供大家参考。具体分析如下： 代码如下://定义字典 Dictionary<string> Address = new Dictionary(); void loadData() {  //这是你要添加的数据  //也...
ASP.NET——实现两个下拉框动态联动
weixin_30311605的博客
08-11 1374
引入： 在网页中，我们经常会遇到下图中的情况。首先在下拉框中选择所在的省，选择之后，第二个下拉框会自动加载出该省中的市。这样设计极大的方便了用户的查找。那这是如何实现的呢？ 1、建立数据库 “省”表 “市”表 2、添加控件 3、两个下拉框分别绑定数据源 protected void Page_Load...
js下拉框选择筛选数据数据联动
最新发布
2301_77487444的博客
06-16 230
在change事件监听中，根据"select1"选中的值，通过修改"select2"的innerHTML来改变"select2"的选项。这样就实现了下拉框选择筛选数据的联动。在JavaScript中，可以通过事件监听和DOM操作来实现下拉框选择筛选数据的联动。
发布自制的操作下拉列表框（SELECT）的三个jquery插件（ajax填充、联动、增加选项）
天天无用
07-31 1万+
  首先是ajax填充插件FillOptions，这个插件可以通过ajax方法获取数据并把数据添加到下拉列表框，数据格式支持xml格式和json格式，插件定义如下FillOptions(url,options)参数说明    url：ajax请求的地址，必须    options包括如下参数datatype：ajax请求返回的数据格式,可以是”xml”或”json”，默认为
实现两级下拉框的联动
weixin_30383279的博客
03-31 454
1.实现两级下拉框的联动。 功能：实现点击年级下拉框，加载对应科目的下拉框。 第一步：首先要加载年级下拉框中的数据。 01.在GradeDAL层（数据访问层）写一个方法，查询所有年级的信息。 /// <summary> /// 从数据库中获取年级信息 /// </summary> /// <re...
Ajax实现两个下拉框的联动
qq_38874726的博客
03-18 886
这里写自定义目录标题 学习中遇到的两个下拉框的联动问题。 例如电商后台的商品管理功能，需要选择商品的一级分类与二级分类。 代码： html代码： <div class="form-group "> <select name="oldPrice" class="form-control" id="idGoodsTypeBig"...
JS实现的简单下拉框联动功能示例
10-18
在JavaScript编程中，下拉框联动是一种常见的交互功能，它允许用户在选择一个下拉框选项后，根据选择自动更新另一个下拉框的选项。这种功能通常用于提供筛选或者关联数据的选择，例如地区与城市之间的关系。在这个...
MVC实现下拉框联动效果（单选）
10-19
首先，我们需要在视图（View）中设置两个下拉框，分别表示部门（dept）和职位（job）。在HTML代码中，我们使用`@Html.DropDownListFor`辅助方法创建这两个下拉框，并通过`Model`对象将数据绑定到它们。同时，我们还...
Vue2_两个下拉框之间进行联动
Rainbow_bead的博客
01-01 1481
vue_两个下拉框之间进行联动
【项目需求】：两个下拉框之间选项关联
weixin_70245286的博客
05-30 549
【代码】【项目需求】：两个下拉框之间选项关联。
Ajax_实现下拉框的联动（详细注释）
12-01
Ajax_实现下拉框的联动效果（详细注释） 有源码程序
下拉框值触发另一个下拉框
12-12
一个下拉框的值被选中后，触发另一个下拉框状态为可选！ 若值为空则为不可选！
VUE下拉框双向联动
热门推荐
程序大视界
04-01 1万+
VUE实现多个下拉框双向联动效果
AJAX实现两个下拉框之间内容的联动
qq_42613859的博客
07-05 4497
1.效果第一个下拉框选择蔬菜时，第二个联动显示黄瓜，番茄第一个下拉框选择水果时，第二个联动显示苹果，菠萝2.实现JSP页面，connect.jsp&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;%String path = request.getContextPath();String ba...
两个静态下拉框固定值实现简单联动!
zhulei_131的专栏
02-13 618
今天这破玩艺耽误了半天,想了想,实在是傻到头了!贴出来为初级程序员做个参考     自取    统一    快递     企业付费    自费    无 function findpst(){  alert(document.getElementById("reportsendtype").value);  if(document.getElementById("rep
通过创建元素从而实现两个下拉框的联动效果
A458545418的博客
11-16 160
<html> <head> <meta charset="utf-8"> <title>javascript</title> </head> <body> <h1 style="margin-left:33%">JAVASCRIPT</h1>...
一个联动的下拉框
万豪给给的博客
02-21 364
多个下拉框在一起，后面的下拉框会根据前面选择的内容的变化而变化。 showCity.jsp <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"
下拉框与下拉框之间的联动效果
weixin_30693183的博客
11-12 258
1 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>下拉框与下拉框之间的联动效果</title> 6 <script language="JavaScript"> 7 function setSel(obj){ 8 ...
vue两个下拉框联动
06-01
实现两个下拉框联动的方法有很多，以下是一个基于 Vue 的示例： HTML 代码： ``` <div id="app"> <label for="province">省份：</label> <select id="province" v-model="selectedProvince"> <option v-for="province in provinces" :value="province">{{ province }}</option> </select> <label for="city">城市：</label> <select id="city" v-model="selectedCity"> <option v-for="city in cities" :value="city">{{ city }}</option> </select> </div> ``` JavaScript 代码： ``` new Vue({ el: '#app', data: { provinces: ['北京', '上海', '广东'], cities: { '北京': ['北京市'], '上海': ['上海市'], '广东': ['广州市', '深圳市', '珠海市'] }, selectedProvince: '', selectedCity: '' }, watch: { selectedProvince: function(val) { this.selectedCity = ''; } }, computed: { filteredCities: function() { return this.cities[this.selectedProvince]; } } }); ``` 代码解释： 1. `provinces` 是一个数组，存储所有省份的名称。 2. `cities` 是一个对象，存储每个省份对应的城市数组。 3. `selectedProvince` 和 `selectedCity` 是两个双向绑定的变量，分别表示当前选中的省份和城市。 4. 在 `watch` 选项中，当 `selectedProvince` 发生变化时，将 `selectedCity` 置空，以防止用户选择了一个省份后，城市下拉框中还显示上一个省份的城市。 5. 在 `computed` 选项中，使用 `selectedProvince` 获取当前选中的省份对应的城市数组，存储在 `filteredCities` 中，用于在城市下拉框中显示正确的选项。 6. 在 HTML 中，使用 `v-for` 指令遍历 `provinces` 和 `filteredCities` 数组，动态生成省份和城市下拉框中的选项。 7. 在省份和城市下拉框中，使用 `v-model` 指令将选中的值与 `selectedProvince` 和 `selectedCity` 双向绑定，以实现联动效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值