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
    评论
专栏目录
点击radio单选按钮切换显示不同内容
04-12
前端 -- 单选框内容影响复选框的隐藏与显示 附代码
码农研究僧的博客
08-08 868
在网页中这类问题比较常见通过选择一个复选框或者下拉框的内容来改变另外一个复选框或者下拉框的内容（一个选项影响另外一个选项）以下内容主要做一个知识点的探讨，类似功能大同小异。......
vue.js element radio 单选框选中切换不同内容
shuang_com的博客
11-17 2095
代码： <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.
js实现下拉框之间的联动（一级分类和二级分类）
程序羊的博客
10-17 2551
效果图： 实现代码： <html> <body> <select id="first" onChange="change()"> <option selected="selected">湖北</option> <option>广东</option> </select> <s...
【js】 下拉框选中值，用选中值找对应的其他属性.
最新发布
weixin_47044596的博客
06-09 390
下拉框选中值，用选中值找对应的其他属性.
用JavaScript实现点击不同的单选按钮出现不同的内容
xiazaikk_2009的博客
04-19 2536
在网页中，通过选择不同的单选按钮，来控制页面上显示不同的内容。要实现这个功能，方法有很多种，个人觉得下面的方法比较好用（试验证明），虽然繁琐些，但思路清楚，简单易懂。 ~~~~~~~~~~~~~~~~~我是分割线~~~~~~~~~~~~~~~~~~~~~ index.jsp: ...... &lt;input type="radio" id="ok1" value="ok1" chec...
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二级分类单选和多选弹出层"项目中，我们主要探讨的是如何利用这两种技术来实现一种交互性强、用户体验良好的分类选择功能。这个功能在电商网站、信息填写表单等场景中非常常见，它允许用户在弹出层...
radio php mysqladmin 数据库 单选 跳转页面,点击不同Radio显示不同内容 Radio单选框切换代码...
weixin_36273006的博客
03-12 585
点击不同Radio显示不同内容 Radio单选框切换代码，找这个东西用了我好几个小时，就是不知道叫什么名字，突然想起来见到过这种效果，在那个页面见到过的也想不起来了，项目中需要用到这个，自己JS这块又不好，所以就狂找。功夫不负有心人，终于还是给我找到了。本来找到了两份，其中一份前几天发过，PHP 选中单选按钮后显示其他表单元素不过此文中的效果实现起来太简单了，纯HTML+CSS,而且Radio选...
ajax实现点击下拉框显示不同数据（仅jsp页面代码）
Fristadd的博客
02-07 349
ajax下拉框显示不同数据
点击不同的单选按钮(radio)出现不同的内容
11-18 3785
前台的一个模块可以调用不同的数据 html： <p> <input id="list" onclick="acheck1()" type="radio" name="list" value="1">选项1 <input id="list" onclick="acheck2()" type="radio" name="list" value=...
el-radio点击不同按钮展示不同内容 el-radio如何做切换
暂时还没想好博客简介
11-30 2690
el-radio点击不同按钮展示不同内容 el-radio如何做切换
html点击单选框显示不同的内容,用JS实现点击不同的input单选按钮出现不同的内容...
weixin_39532466的博客
06-04 2362
js:type="text/javascript">function aCheck1(){document.getElementById("span1").style.display="block";document.getElementById("span2").style.display="none";}function bCheck2(){document.getElementById("...
小程序在同一个页面中，当改选radio选项的时候，显示出不同的内容，不触碰事件时都隐藏？
qq_48310045的博客
11-24 323
小程序radio的显示和隐藏
点击不同单选按钮出现不同内容
热门推荐
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
利用radio 的checked实现tab切换，切换标题，在同一区域显示不同内容
qq_39896032的博客
09-09 578
checked选择器实现tab切换(这里写自定义目录标题) checked选择器实现tab切换 闲暇时间找bug发现利用css就可以实现，切换标题，在同一区域显示不同内容，又是一次感受到编程的美。 效果图 实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
点击单选框按钮实现页面切换
qq_58148854的博客
11-27 1393
首先在页面实现单选框按钮 <div class="layui-form-item"> <label class="layui-form-label" style="margin-left: -15px;">单选框</label> <div class="layui-input-block marginleft10"> <div class="lay
使用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、付费专栏及课程。

余额充值