js实现两个单选按钮，选不同的选项弹出显示不同的下拉框

最新推荐文章于 2023-06-09 17:13:45 发布
最新推荐文章于 2023-06-09 17:13:45 发布
阅读量7k 收藏 4
点赞数 2
分类专栏： JavaScript 文章标签： javascript 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
 <script type="text/javascript">
  function switchItem(tag){
   var s1 = document.getElementById('s1');
   var s2 = document.getElementById('s2');
   var s3 = document.getElementById('s3');
   if(tag=='外单位'){
    s1.style.display = '';
    s2.style.display = 'none';
    s3.style.display = 'none';
   }
   else{
    s1.style.display = 'none';
    s2.style.display = '';
    s3.style.display = '';
   }
  }
 </script>
 <div>
  <label><input type="radio" οnclick="switchItem('外单位')" name="radio" />外单位</label>
  <label><input type="radio" οnclick="switchItem('本单位')" name="radio" />本单位</label>
 </div>
 
 <div>
  <select id="s1" style="display:none">
   <option>外单位A1</option>
   <option>外单位A2</option>
   <option>外单位A3</option>
  </select>
 </div>
 <div>
  <select id="s2" style="display:none">
   <option>本单位A1</option>
   <option>本单位A2</option>
   <option>本单位A3</option>
  </select>
  <select id="s3" style="display:none">
   <option>本单位B1</option>
   <option>本单位B2</option>
   <option>本单位B3</option>
  </select>
 </div>
</body>
</html>

海风一直眷恋着沙
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 -- 单选框内容影响复选框的隐藏与显示 附代码
码农研究僧的博客
08-08 855
在网页中这类问题比较常见通过选择一个复选框或者下拉框的内容来改变另外一个复选框或者下拉框的内容（一个选项影响另外一个选项）以下内容主要做一个知识点的探讨，类似功能大同小异。......
js实现选择不同radio改变文本框编辑状态.txt
07-26
js实现选择不同radio改变文本框编辑状态。多多指教。
js制定一个单选按钮_js实现两个单选按钮，选不同的选项弹出显示不同的下拉...
weixin_29005499的博客
01-14 941
JS实现了如下功能：O外单位 O本单位1、如果点选 外单位，则出来一个下拉框A，内容是：外单位A1外单位A2外单位A32、如果点选 本单位，则出来 两个下拉框下拉框B，下拉框C 内容随便3、 以上两组下拉框，随意位置，但建议一开始显示时，会隐藏。下面是js实现两个单选按钮，选不同的选项弹出显示不同的下拉框的相关内容，文章教程主要讲述与单选按钮 下拉框 相关的一些技术与知识，更多的内容欢迎大家访...
【js】 下拉框选中值，用选中值找对应的其他属性.
最新发布
weixin_47044596的博客
06-09 389
下拉框选中值，用选中值找对应的其他属性.
js实现下拉框之间的联动（一级分类和二级分类）
程序羊的博客
10-17 2551
效果图： 实现代码： <html> <body> <select id="first" onChange="change()"> <option selected="selected">湖北</option> <option>广东</option> </select> <s...
js实现点击一个框的内容，其内容就显示在另一个框中（onchange事件）
weixin_30258901的博客
01-08 674
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 function select(){...
js布局实现单选按钮控件
10-15
在JavaScript中，实现单选按钮（Radio Button）控件是一项常见的任务，特别是在构建交互式的网页应用时。这个示例展示了如何使用纯JavaScript代码布局并处理单选按钮的选择事件。我们将详细解析这段代码，理解其中...
js实现不提交表单获取单选按钮值的方法
10-23
在这个例子中，我们有两个单选按钮，它们共享`CardType`这个名称，表示它们是一组。`value`属性用于设定每个选项的值。 接下来，我们可以使用JavaScript来获取这些单选按钮的值。在上述代码中，我们可以看到一个名...
单选按钮实现性别的选择.rar
07-02
为了创建性别选择，我们需要两个单选按钮，分别代表“男”和“女”。每个单选按钮都有一个唯一的`name`属性，这样在同一组内，用户只能选择一个。例如： ```html 男</label><br> 女</label><br> ``` 这里...
PHP+jQuery二级分类单选和多选弹出层
11-10
在这个"PHP+jQuery二级分类单选和多选弹出层"项目中，我们主要探讨的是如何利用这两种技术来实现一种交互性强、用户体验良好的分类选择功能。这个功能在电商网站、信息填写表单等场景中非常常见，它允许用户在弹出层...
调查表，根据不同的选项来显示相对应的内容
09-06
此调查表是针对上个调查表的改变，交互页为“survey-new.html”，静态效果页为“survey-new - 副本.html”，其需求为： 1、点击所需品类时，会出现对应的内容； 2、当没有选中品类时，“已选品类”这个标题不显示，当选中品类时，这个标题显示； 3、对应的内容要隔行换色； 4、因为内容的长短不同，所以根据品类的name来判断使用哪个class名。 大体的效果就实现了，具体的就可以交给后台，他们写了接口，就可以根据具体的数据来添加html。其中有些参数需要后台开发来新增加。
点击radio单选按钮切换显示不同内容
04-12
根据select不同的选项实现相应input框添加项的显示
baiduwenku112的博客
11-05 389
实现效果： 　　@1.单击包时，显示包时的添加项 @2.单击包里程，显示包里程的添加项 二 代码实现： 　　给select添加change事件 获取当前select的value 根据value判断对象显示其添加项框 <script> $(document).ready(function() { 　　　　$('#types').change(function() { #type 为select id 　　　　　　var v = $(this).val()...
vue.js element radio 单选框选中切换不同内容
shuang_com的博客
11-17 2092
代码： <span>分区类型</span> <el-radio v-model="radio" label="1">Range</el-radio> <el-radio v-model="radio" label="2">Hash</el-radio> <el-radio v-model="radio" label="3">List</el-radi.
radio php mysqladmin 数据库 单选 跳转页面,点击不同Radio显示不同内容 Radio单选框切换代码...
weixin_36273006的博客
03-12 582
点击不同Radio显示不同内容 Radio单选框切换代码，找这个东西用了我好几个小时，就是不知道叫什么名字，突然想起来见到过这种效果，在那个页面见到过的也想不起来了，项目中需要用到这个，自己JS这块又不好，所以就狂找。功夫不负有心人，终于还是给我找到了。本来找到了两份，其中一份前几天发过，PHP 选中单选按钮后显示其他表单元素不过此文中的效果实现起来太简单了，纯HTML+CSS,而且Radio选...
el-radio点击不同按钮展示不同内容 el-radio如何做切换
暂时还没想好博客简介
11-30 2680
el-radio点击不同按钮展示不同内容 el-radio如何做切换
点击不同的单选按钮(radio)出现不同的内容
11-18 3783
前台的一个模块可以调用不同的数据 html： <p> <input id="list" onclick="acheck1()" type="radio" name="list" value="1">选项1 <input id="list" onclick="acheck2()" type="radio" name="list" value=...
点击不同单选按钮出现不同内容
热门推荐
qq_33205354的博客
05-12 1万+
就我个人来说，我要实现的东西是，审核某个东西，如果通过则不需要填写理由，如果审核不通过则需要填写理由，出现一个文本域&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;&lt;/title&gt;&lt;script src="js/jquery.min
【如何通过切换单选按扭以展示不同内容】---Axure常用技巧分享
weixin_41771172的博客
03-28 3622
【如何通过切换单选按扭以展示不同内容】—Axure常用技巧分享 最近都在忙公司2020年最重视的新项目的管理，在这个过程中，有位产品新人在设计原型的过程中，遇到一个Axure操作问题：如何通过单选按钮切换来展示不同的内容？ 在耐心分享完后，他说网上很多太复杂、看不懂。我就突然有个念头：这个切换展示技巧算是Axure较常用的设计之一，我在PM论坛和博客浏览文章时，也看到蛮多讨论原型高保真还是低保真好...
使用js实现选中不同单选按钮，显示不同表格
05-25
可以使用HTML和JavaScript来实现这个功能。首先，在HTML中创建单选按钮和表格： ```html <input type="radio" name="table" value="table1"> Table 1 <input type="radio" name="table" value="table2"> Table 2 <table id="table1"> <tr> <td>Table 1 Row 1 Column 1</td> <td>Table 1 Row 1 Column 2</td> </tr> <tr> <td>Table 1 Row 2 Column 1</td> <td>Table 1 Row 2 Column 2</td> </tr> </table> <table id="table2"> <tr> <td>Table 2 Row 1 Column 1</td> <td>Table 2 Row 1 Column 2</td> </tr> <tr> <td>Table 2 Row 2 Column 1</td> <td>Table 2 Row 2 Column 2</td> </tr> </table> ``` 然后，在JavaScript中，添加事件监听器来跟踪单选按钮的选择，并显示相应的表格： ```javascript // 获取单选按钮和表格元素 var radioButtons = document.getElementsByName("table"); var tables = document.getElementsByTagName("table"); // 给单选按钮添加事件监听器 for (var i = 0; i < radioButtons.length; i++) { radioButtons[i].addEventListener("change", function() { // 隐藏所有表格 for (var j = 0; j < tables.length; j++) { tables[j].style.display = "none"; } // 显示选中的表格 var tableId = this.value; var selectedTable = document.getElementById(tableId); selectedTable.style.display = "block"; }); } ``` 这样，当用户选择不同的单选按钮时，相应的表格就会显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值