select默认选中

前两天在项目开发的时候有个需求是要求多个下拉框，选中某一项后其他下拉框移除该项，虽然写的有点绕，如果那个小伙伴有更好的例子，可以贡献下。先贴几张图看下效果 这是全部下拉框展开的效果图，具体描述看图吧，下面就开始贴代码 html部分 <div class="video_in"> <p> 下拉一 <select name="B1other1_1" id='B1other1_1' class="select"> <option value='0'>请选择</option> <option value='1'>选择1</option> <option value='2' selected>选择2</option> <option value='3'>选择3</option> <option value='4'>选择4</option> </select> </p> <p> 下拉二 <select name="B1other2_1" id='B1other2_1' class="select"> <option value='0'>请选择</option> <option value='1'>选择1</option> <option value='2'>选择2</option> <option value='3' selected>选择3</option> <option value='4'

select2是一个非常好用的下拉框插件，支持很多功能。 官方文档，例子：http://select2.github.io/ 现在记录一下我在工作中用到的下拉框多值选择。界面如下： 在引入css 、js文件之后，html页面如下： <select id="cluster" class="select2" multiple="multiple"> <option value="1">jiesi-1</option> ... <option value="5">jiesi-8</option> </select> 初始化： 在js中加载的时候初始化select. $("#id").select2(); 当然，这是默认的不带任何属性的初始化，还可以带一些参数，具体如下： $('#id').select2({ placeholder : '输入话题关键字', tags : true, multiple : true, height: '40px', maximumSelectionLength : 3, allowClear : true, language: "zh-CN", data : itemList itemList是[{}{}{}{}]格式的数组 }); 其他具体参数，转载如下： https://blog.csdn.net/u011317027/article/details

要做这样一种功能，当我点击左边的下拉框的时候，右边下拉框启用进行选择。如下图： 当左边重新点击“请选择”的时候，右边选择状态清空并禁用： 这个很好做，用到只需要获取所选择Index就行（默认从0开始） 下面是js代码： function changeMorTime(obj) { //当左边select控件所选择为请选择时 if (obj.selectedIndex == 0) { //获取 右边用药计量控件 var cselc = document.getElementById("MorTime"); cselc.options.selectedIndex = 0; //回到初始状态 $("#MorTime").attr("disabled", "disabled");//禁用 } else { $("#MorTime").removeAttr("disabled"); } } html代码如下： <td> <select class=" check-input" onload="IninSageALLTime()" onchange="changeMorTime(this)" id="dosageMorTime" name="dosageMorTime" required="required"> </select> </td> <td > <select class="

引入问题 之前博主在实际开发中遇到了一个问题，就是需要既支持多选又同时支持模糊查询的下拉控件，大家所熟知的比较强大的下拉框插件bootstrap-select2，博主当时也参考过，但是发现它的多选效果做的比较差，类似这种， select2下拉多选框 这样的多选控件必须要控件足够长，如果选择超过一定限制就会出现样式崩溃，你懂的~后面我无意中发现了bootstrap-select插件，瞬间发现它很高大上呀！它即可以支持单选，又支持多选，最厉害的是竟然还自带模糊查询功能！先给大家展示下炫酷的效果吧： bootstrap-select下拉多选框 这样的控件不用真是可惜了，后面博主找了很多文档和博客参考，但是发现很多都没有写清楚具体的用法，只是简单的摆一个例子，并没有太大的参考价值，博主通过研究官网的相关文档以及结合自身开发经验，把bootstrap-select的用法做一个清晰的梳理，供大家参考。 官方插件地址: http://silviomoreto.github.io/bootstrap-select/ Github地址: https://github.com/silviomoreto/bootstrap-select 应用示例（参考官方文档Basic examples） 1.单选 简单单选 选中默认是没有“√”的。 <select class="selectpicker">

<div id="app"> <!-- 选择一个 --> <select name="abc" id="" v-model="fruits"> <option value="" >请选择</option> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="梨子">梨子</option> <option value="葡萄">葡萄</option> </select> <h2>你说选择的是:{{fruits}}</h2> <!-- 选择多个 --> <select name="abc" id="" v-model="fruitss" multiple> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="梨子">梨子</option> <option value="葡萄">葡萄</option> </select> <h2>你说选择的是:{{fruitss}}</h2> </div> </body> <script> const app = new Vue({ el: "#app", data() { return { fruits: "", fruitss: [] } }, })

首先导入Select模块： 1 # coding=utf-8 2 from selenium import webdriver 3 from selenium.webdriver.support.select import Select 1、Select提供了三种选择某一项的方法 1 select_by_index # 通过索引定位 2 select_by_value # 通过value值定位 3 select_by_visible_text # 通过文本值定位 注意事项： index索引是从“0”开始； value是option标签的一个属性值，并不是显示在下拉框中的值； visible_text是在option标签中间的值，是显示在下拉框的值； 2、Select提供了三种返回options信息的方法 1 options # 返回select元素所有的options 2 all_selected_options # 返回select元素中所有已选中的选项 3 first_selected_options # 返回select元素中选中的第一个选项 注意事项： 这三种方法的作用是查看已选中的元素是否是自己希望选择的： options：提供所有选项的元素列表； all_selected_options：提供所有被选中选项的元素列表； first_selected_option

背景 有一块 div 元素包含一段内容, 想要利用 CTRL+A 选中那块 div 元素下的的区间. 同时我又不想选中 div以外的内容, 默认情况下会将整个html页面可以选中的内容选中. <div> <p>我想被选中</p> </div> 实践 <div contenteditable="true" id="app"> <p> 我想被Ctrl+A选中 </p> <br /> <p> 我也想被Ctrl+A选中 </p> </div> <script> var app = document.getElementById('app'); app && app.addEventListener('keydown', function (event) { if ((event.ctrlKey || event.metaKey) && event.keyCode == 65) { console.log('allow') } else { event.preventDefault ? event.preventDefault() : event.returnValue = false; } }); </script> 原理 利用 contenteditable 属性, 让元素拥有控件自带的类似 input , textarea 输入特性, 那么使用 ctrl + a 或 command +

jstree获取当前选中的checkbox和获取选中节点的所有节点 首先初始化一个带有复选框的 jstree $('#demo_tree').jstree({ "core" : { 'data': [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"}, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] }, "plugins" : ['checkbox'], }); jstree获取当前选中节点 这时分为两种选中，一个是点击也就是鼠标单击 节点 而不是 checkbox 的选中 var treeNode = $('#demo_tree').jstree(true).get_selected(true); //获取所有选中的节点对象 同理获取 checkbox 的选中 var treeNode = $('#demo_tree').jstree(true).get_checked(true)

　　我们在页面输入的文本按理来说应该都是可以选中的，但是如何才能让显示出来的文本或是图片不被选中呢，这时候就需要用到 user-select 属性。 user-select user-select （CSS属性），控制着用户能否选中文本。除了在文本框中，在 Chrome浏览器中对已经加载的文本没有影响。 一、语法： user-select：none / text / all / element / auto user-select 属性的默认值为 text，没有继承性，适用于替换元素外的所有元素。 二、属性值： 　　 none ：文本不能被选中。注意这个 Selection 对象包含这些元素。从 Firefox21 开始，none表现的想 -moz-none，因此可以使用 -moz-user-select ：text 在子元素上重新启用选择。 　　 text ：默认值，可以选中文本 　　 all ：当所有内容可以作为一个整体被选择。（如果双击或是在上下文上点击子元素，那么包含该元素的子元素也将被选中。） 　　 element ：可以选择文本，但是选择范围受元素边界的约束 　　 auto ：auto的计算值确定如下： 在::before 和 ::after 伪元素上，计算的属性是 none 如果元素是可编辑元素，则计算值是 contain 否则，如果此元素的父元素的 user

s elect2的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select2的学习</title> <script> remoteToLoadCss('BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/datepicker.css'); remoteToLoadJs('media/js/jquery-1.11.1.js'); remoteToLoadJs('BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/bootstrap-datepicker.js'); remoteToLoadJs('BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/bootstrap-datepicker.zh-CN.min.js'); </script> <script src="../../../js/select2.min.js"></script> <link href="../../../css/select2.min.css" rel="stylesheet"> </head>