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中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
原生js轮播特效
May 18 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
js的Object.assign用法示例分析
Mar 05 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
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python不带重复的全排列代码
2013/08/13 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python函数形参用法实例分析
2015/08/04 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Python @property及getter setter原理详解
2020/03/31 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
写好自荐信的要点
2013/11/06 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
活着观后感
2015/06/03 职场文书
驾驶员管理制度范本
2015/08/06 职场文书