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

解决办法:定义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. 上传本地代码到gitHub过程详解

    1.注册Github账号 2.创建自己的GitHub仓库 3.创建自己的Repository(项目的名字等) 4.复制创建仓库的地址到Git命令窗口并执行命令行(Git clone 仓库的复制地址) ...

  2. vue+nginx编译部署

    1.项目路径下vue-test输入命令npm run build编译完成后会发现在vue-test文件夹下多出一个dist文件夹这里面就是编译好的文件了.2.网上下载nginx,下载地址http:// ...

  3. lnmp环境 swoole聊天室

    pecl install swoole 安装php扩展swooleservice php-fpm restart 重启php服务whereis php.ini 查看php.ini的位置 查看文件是否配 ...

  4. python基础知识1---python相关介绍

    阅读目录 一 编程与编程语言 二 编程语言分类 三 主流编程语言介绍 四 python介绍 五 安装python解释器 六 第一个python程序 七 变量 八 用户与程序交互 九 基本数据类型 十 ...

  5. TCP/IP学习20180805-数据链路层-IP选路

    转,原文链接https://blog.csdn.net/wh1511995112/article/details/51474692 IP选路 什么是IP选路? IP选路,即IP寻路,就是根据路由表中的 ...

  6. 在ubuntu下装python3.6

    Ubuntu 14.04 and 16.04 If you are using Ubuntu 14.04 or 16.04, you can use J Fernyhough's PPA at htt ...

  7. .net core Ocelot实现API网关并部署在docker中

    基于Ocelot(http://ocelot.readthedocs.io)搭建的API网关demo 软件以及系统版本:  Asp.Net Core 2.2 Ocelot 13.5.0 CentOS ...

  8. 菜鸟的java代码审计之旅-0之java基础知识

    前言: 对于java的代码审计我就是一个小白,没有代码基础(不会java),从0开始记录我的java漏洞的审计学习之旅.对于java来说是一门很难的语言,但是不去学习就永远不会.对于一门很复杂的语言如 ...

  9. Centos7下GlusterFS分布式存储集群环境部署记录

    0)环境准备 GlusterFS至少需要两台服务器搭建,服务器配置最好相同,每个服务器两块磁盘,一块是用于安装系统,一块是用于GlusterFS. 192.168.10.239 GlusterFS-m ...

  10. 删除N天前的文件(夹)与拷贝文件到共享盘的批处理

    rem ======= 删除目录 7天前目录 ========= forfiles /P "E:\Folder" /S /D -7 /C "Cmd /C If @isdi ...