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 相关文章推荐
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
简单了解Vue computed属性及watch区别
Jul 10 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动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
Javascript之文件操作
2007/03/07 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
办公室文员自荐书
2014/02/03 职场文书
运动会通讯稿150字
2014/02/15 职场文书
护理专科自荐书范文
2014/02/18 职场文书
初中班主任评语
2014/04/24 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
效能风暴心得体会
2014/09/04 职场文书
个人委托函范文
2015/01/29 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers