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

最新推荐文章于 2023-05-27 14:27:03 发布
最新推荐文章于 2023-05-27 14:27:03 发布 · 1k 阅读 · 1
文章标签：

#JavaScript #XHTML #prototype #HTML #F# #ViewUI

<!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" onchange="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>
iteye_6481
关注
两个下拉框联动的实现
qq_43681933的博客
11-11 1453
两个下拉框联动的实现 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'){ /* 机构 */
JS实现的简单下拉框联动功能示例
10-18
在JavaScript编程中，下拉框联动是一种常见的交互功能，它允许用户在选择一个下拉框选项后，根据选择自动更新另一个下拉框的选项。这种功能通常用于提供筛选或者关联数据的选择，例如地区与城市之间的关系。在这个...
通过创建元素从而实现两个下拉框的联动效果
A458545418的博客
11-16 209
<html> <head> <meta charset="utf-8"> <title>javascript</title> </head> <body> <h1 style="margin-left:33%">JAVASCRIPT</h1>...
发布自制的操作下拉列表框（SELECT）的三个jquery插件（ajax填充、联动、增加选项）
天天无用
07-31 1万+
  首先是ajax填充插件FillOptions，这个插件可以通过ajax方法获取数据并把数据添加到下拉列表框，数据格式支持xml格式和json格式，插件定义如下FillOptions(url,options)参数说明    url：ajax请求的地址，必须    options包括如下参数datatype：ajax请求返回的数据格式,可以是”xml”或”json”，默认为
Ajax实现两个下拉框的联动
qq_38874726的博客
03-18 961
这里写自定义目录标题 学习中遇到的两个下拉框的联动问题。 例如电商后台的商品管理功能，需要选择商品的一级分类与二级分类。 代码： html代码： <div class="form-group "> <select name="oldPrice" class="form-control" id="idGoodsTypeBig"...
使用ajax进行两个下拉框select之间的联动
weixin_41134156的博客
03-05 1378
当选择第一个下拉框的option时，通过ajax向后台指定servlet发送请求，得到的数据以json文件的形式传回来，成功的话，则执行success，否则执行error。获取想要在第二个下拉框显示的数据时，动态添加option 第一个下拉框 &lt;select class="form-control" id="academy" name=""&gt;&lt;/select&gt; 第二个下拉...
精选资源
C#省份城市下拉框联动简单实现方法
01-21
本文实例讲述了C#省份城市下拉框联动简单实现方法。分享给大家供大家参考。具体分析如下： 代码如下://定义字典 Dictionary<string> Address = new Dictionary(); void loadData() {  //这是你要添加的数据  //也...
Angularjs实现下拉框联动的示例代码
10-19
在Angularjs中实现下拉框联动是构建动态交互式网页的重要组成部分。联动下拉框通常用于实现基于一个下拉选择来动态变化另一个下拉框的选项。Angularjs提供了几种实现下拉框联动的方法，接下来将基于给定文件内容对...
二级联动 （两个下拉框的二级联动，和单选按钮与下拉框的二级联动）
weixin_37623470的博客
04-28 8757
1，两个下拉框的二级联动代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JS实现二级联动菜单&lt;/title&gt; &lt;/head&gt; &l
vue select二级联动第二级默认选中第一个option值的实例
08-28
下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
两个下拉框联动 ajax,AJAX异步请求二级联动加载下拉框
weixin_35895994的博客
08-05 911
最近在开发中用到的二级联动加载下拉框，感觉比较有意思，记录一下。首先，二级联动下拉框的数据库建模是至少两张表以上的外键关联查询，首先准备数据库表格 数据库表以及数据准备好过后，开始开发前端页面(前提是整个项目环境搭建好的情况下，此项目使用IDEA开发) 我们的需求是通过选择第一个下拉框的时候，第二个下拉框自动加载属于第一个下拉框的集合，所以，这个时候怎么才能加载呢？无非是根据第一个下拉框的某个...
下拉框与下拉框之间的联动效果
weixin_30693183的博客
11-12 291
1 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>下拉框与下拉框之间的联动效果</title> 6 <script language="JavaScript"> 7 function setSel(obj){ 8 ...
select两个关联的下拉列表
weixin_30632089的博客
10-31 553
今天用到两个关联的select，整理一下代码，仅供参考 如下： <html> <head> <meta charset="UTF-8"> <title></title> </head> <script language="javascript"> function chang...
js实现的下拉链表的联动效果
xw370457549的专栏
10-25 1660
无标题文档 function changeSel() { if(document.ld.xllb1.selectedIndex == 0) { document.ld.xllb2.length=1; document.ld.xllb1.selectedIndex=0; document.ld.xllb2.selectedIndex=0; documen
vue实现两个el-select下拉框联动效果
qiqisix的博客
05-27 4419
只有一个list，多数文章中都是两个list实现联动。
html只选下拉框关联,怎么让下拉框和下拉框选择后的内容关联起来
weixin_33318222的博客
06-03 877
如何让下拉框和下拉框选择后的内容关联起来。$(document).ready(function(){$("#sel").change(function(){varflag=$(this).val();switch(flag){case'1':$("#content"+flag).show().siblings('div').hide();break;case'2':$("#content...
VUE下拉框双向联动
热门推荐
程序大视界
04-01 1万+
VUE实现多个下拉框双向联动效果
Vue3实现两个下拉框得联动
最新发布
08-08
在 Vue 3 中实现两个下拉框的联动功能，通常需要利用 `v-model` 实现双向数据绑定，并通过 `@change` 或 `@update:modelValue` 监听第一个下拉框值的变化，从而动态更新第二个下拉框的选项。 以下是一个完整的示例，展示了如何在 Vue 3 中实现两个下拉框的联动效果： ### ### 基本结构 在模板部分，定义两个 `<select>` 元素，分别绑定机构和部门的值： ```html <template> <div> <select v-model="form.organ" @change="getDept"> <option v-for="item in organOptions" :key="item.id" :value="item.id"> {{ item.name }} </option> </select> <select v-model="form.dept"> <option v-for="dept in deptOptions" :key="dept.id" :value="dept.id"> {{ dept.name }} </option> </select> </div> </template> ``` ### ### 数据定义 在脚本部分，定义 `form`、`organOptions` 和 `deptOptions` 数据，并实现 `getDept` 方法来根据所选机构更新部门选项： ```javascript <script setup> import { reactive, ref } from 'vue'; // 定义表单数据 const form = reactive({ organ: '', dept: '' }); // 机构选项 const organOptions = ref([ { id: '1', name: '机构A' }, { id: '2', name: '机构B' } ]); // 部门选项，初始为空 const deptOptions = ref([]); // 根据机构获取部门 const getDept = () => { // 模拟调用接口获取部门数据 if (form.organ === '1') { deptOptions.value = [ { id: '101', name: '部门A1' }, { id: '102', name: '部门A2' } ]; } else if (form.organ === '2') { deptOptions.value = [ { id: '201', name: '部门B1' }, { id: '202', name: '部门B2' } ]; } else { deptOptions.value = []; } }; </script> ``` ### ### 说明 - `v-model` 实现了 `form.organ` 和 `form.dept` 的双向绑定。 - `@change="getDept"` 监听机构下拉框的变化，调用 `getDept` 方法更新部门选项。 - `getDept` 方法根据 `form.organ` 的值模拟从后端获取对应部门数据的过程，并更新 `deptOptions` [^2]。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值