js实现下拉框二级联动


Posted in Javascript onDecember 04, 2018

在做项目的时候,一个添加问题题目,选项和答案的问题,题目类型分为选择题,判断题,和多选题三种,此处需要添加一个二级联动的功能,即当题型为选择题的时候,正确选项的下拉框里出现的是A,B,C,D.如果题型是判断题,正确选项的下拉框内容为正确,错误,如果题型类型为多选题,则正确答案的输入框变为可输入答案型的文本框。实现效果在文末。

HTML的页面如下:

<div class='form-group'>
 <label class='col-md-2 control-label'>题型</label>
 <div class='col-md-2'>
  //通过fn()函数去改变答案框状态的改变
  <select class="form-control input-sm" id="type" onclick="fn()">
    <option value="选择题">选择题</option>
  <option value="判断题">判断题</option>
  <option value="多选题">多选题</option>
  </select>
 </div>
</div>
 
 
<div class='form-group'>
 <label class='col-md-2 control-label'>正确选项</label>
 <div class='col-md-10'>
//此处写一个下拉框一个input框,当题型为多选时,利用JS将下拉框隐藏,input框显示
 <input class='form-control' placeholder='正确选项' type='text' name='answerTrue1' id='answerTrue1' type="hidden" data-bv-notempty='true' data-bv-notempty-message='正确答案不能为空'>
 <select class="form-control input-sm" id="answerTrue2" name="answerTrue2">
 <option value="A">A</option>
 <option value="B">B</option>
 <option value="C">C</option>
 <option value="D">D</option>
 </select>
 </div>
</div>

以下为JS部分:

<script type="text/javascript">
//页面加载时执行init函数,使多选题的正确答案的文本框隐藏
init();
function init(){
 $("#answerTrue1").hide();
}
 
//题目类型和答案选择的二级联动
 function fn(){
 var type=document.getElementById("type");
 var t=type.value;
 var answer=document.getElementById("answerTrue2");
 switch(t)
 {
  //判断是选择题还是判断题,然后改变下拉框中的内容
  case "选择题": answer.innerHTML="<option>A</option><option>B</option> 
          <option>C</option><option>D</option>";
  $("#answerTrue1").hide();
  $("#answerTrue2").show();
  break;
  case "判断题":answer.innerHTML="<option>正确</option><option>错误</option>";
  $("#answerTrue1").hide();
  $("#answerTrue2").show();
  break;
  default:$("#answerTrue1").show();
  $("#answerTrue2").hide();
 }
 };
</script>

实现效果如下:

js实现下拉框二级联动

js实现下拉框二级联动

js实现下拉框二级联动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 #Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 #Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 #Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 #Javascript
React事件处理的机制及原理
Dec 03 #Javascript
JointJS流程图的绘制方法
Dec 03 #Javascript
微信小程序之事件交互操作实例分析
Dec 03 #Javascript
You might like
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
JavaScript实现通讯录功能
2020/12/27 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Python文件操作方法详解
2020/02/09 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
建材投资建议书
2014/05/16 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android