如图不区分选项与其他选项是互斥的关系,当选择了不区分时,其他选项就要去除,当有其他选项存在时,就不能有不区分

解决办法:定义change事件,若列表发生改变,首先判断点击的是否是不区分,若是,则将其他选项剪切掉,若是点击的是其他选项,就判断已选择的选项中是否有不区分,若有,则将其切除

源码:

下拉列表框中定义事件:@change="handleSelectedChange"   //注:@=v-on
handleSelectedChange:function(value){
      if(value[value.length-1]=="不区分"){//如果点击的是不区分的选项,就将其他选项去除
        value.splice(0,value.length-1);
      }else if(value.indexOf("不区分")!=-1){//点击的是其他选项,若是内部含有不区分的选项,就将不区分的选项去除,注意这里的indexOf的O是大写的,真是烦人
        value.splice(value.indexOf("不区分"),1);//注意这里的indexOf的O是大写的,真是烦人
      }
    },

js解决下拉列表框互斥选项的问题的更多相关文章

  1. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  2. javaScript动态给下拉列表框添加选项

    方式一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></titl ...

  3. 点击显示子菜单,离开隐藏子菜单(onmouseout下包含a标签的js解决方法)

    <div class="menu">     <a href="javascript:void(0);" id="a_all&quo ...

  4. JS解决通过按钮切换图片的问题

    我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...

  5. 去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

    对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe, ...

  6. 2.26 js解决click失效问题

    2.26 js解决click失效问题 前言有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应.这种问题遇到了,是比较头疼的,因为没任何报错,只是click事件失效了.本篇用2种方法解决这种诡 ...

  7. js解决弹窗问题实现班级跳转DIV示例

    js解决弹窗问题实现班级跳转DIV 1.js代码如下: <%--实现班级跳转DIV--%>  <div id="displayClassDiv" style=&q ...

  8. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  9. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

随机推荐

  1. 记一次nmap扫描信息收集过程

    1.首先扫描网段内存活主机 nmap -sP 192.168.1.1-254 2.获取到存活主机后,开始进行端口扫描 nmap -p1-1000 192.168.1.66 可得到端口状态: filte ...

  2. Ubuntu 18.04 使用Systemd管理MySQL 5.6

    转自:https://blog.csdn.net/skykingf/article/details/45225981 如何用Systemd管理 general 包安装的MySQL呢? 首先看看yum安 ...

  3. nginx的location root alias指令以及区别

    原文:http://blog.csdn.net/bjash/article/details/8596538 location /img/ { alias /var/www/image/; } #若按照 ...

  4. 用openssl为WEB服务器生成证书(自签名CA证书,服务器证书)

    用openssl为WEB服务器生成证书(自签名CA证书,服务器证书) 来源: https://www.cnblogs.com/osnosn/p/10608455.html 来自osnosn的博客 写于 ...

  5. 为什么HTML中的多个空格或是回车在浏览器上只能显示出一个?

    我们在学习HTML的时候可能书本或是老师会告诉我们一件事,就是在HTML中不管我们在两个文本之间加上多少连续的空格或是回车,到了浏览器里面只能显示出一个来.但是我们从来不知道为什么. 原因很简单,因为 ...

  6. pc端布局的一点思考

    编写pc端页面需要注意些什么? 1.自适应最小屏幕,在小屏幕上样式不能错乱. 在桌面屏幕各分辨率使用比例中可以看到各桌面分辨率的使用比例,日常pc端开发我们会考虑到适配1024宽度大小的屏幕. 对于管 ...

  7. vue 路由参数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 禅知Pro 1.6 前台任意文件读取 | 代码审计

    禅知 Pro v1.6 前台任意文件读取 | 代码审计 蝉知专业版是基于蝉知企业门户系统开源版开发,继承了蝉知本身的优秀功能.相对于蝉知开源版增强了商品的属性自定义.属性价格定制.物流跟踪.微信支付. ...

  9. To be taught if i am fortunate

    此博客算是我自娱自乐的海洋球池吧. 由于我十分的菜并且文笔拙劣,所以您可能并不能在这找到什么有用的信息或者好玩的东西(或者exciting的内容). 如果您能指出我的一些错误,我将十分感激.

  10. 【Python爬虫】01:网络爬虫--规则

    Python网络爬虫与信息提取 目标:掌握定向网络数据爬取和网页解析的基本能力. the website is the API 课程分为以下部分: 1.requsets库(自动爬取HTML页面.自动网 ...