js下拉选项框

功能实现:在js下拉选项框中不能出现属于自己的选项

在js文件中首先运行function函数

var dep = ["自己的选项","别人的选项"]

在function函数中动态的为#other下拉选项框添加option选项

$(function(){
 
 var roomid = $("#roomId").val();
 //所属部门 将部门名字添加到html页面

//通过#roomOwnerDeptId的值获取html中的自己的选项值
 var self = $("#roomOwnerDeptId option").text();
 var name = this.text;

//循环遍所有的选项值
for (var i = 0; i < department.length; i++) {

//比较从html获取到的值和后后端获取到的值
   if (dep[i] != self) {
   $("#select").append(‘<option value=6 name=6>BG9_PTJ_IND_Dev_WF</option>‘)
   $("#select").append(‘<option value=7 name=7>BG9_PTJ_Ins_InsSvc_WF</option>‘)

});

//选项选择
$("#select").click(function(){
 //获取所有select选项中的值
 var depart = $("#select option")
 //获取当前选项值
 var name = this.value;
 //循环遍历所有的选项值
 depart.each(function(index,value){  
  if ($(value).val() == name) {
   //隐藏当前被选中的选项值
   $(this).hide()
   //显示被选中选项的兄弟值
   $(this).siblings().show()
 })
})

原文地址:https://www.cnblogs.com/xingkongzhizhu/p/12600285.html

时间: 2024-07-31 18:10:50

js下拉选项框的相关文章

[js开源组件开发]模拟下拉选项框select

模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://www.lovewebgames.com/jsmodule/select.html 源码查看下载请点击这里https://github.com/tianxiangbing/select 调用示例 <select name="select" id="select"&g

angularJS 可编辑下拉选项框

功能介绍: 该组件将文本框和下拉框的组合,当你点击最右边的下拉按钮,实现下拉框选择的功能:当你选中文本框,实现文本框输入的功能.将文本框和下拉框设置name属性一样他自动会把对应下拉框的值传入后台,而文本框的值不传,当你做文本框使用,它会把文本框的值传入后台而下拉框的值不传. 可编辑下拉选项框 ANY 1 1.html代码 1 <!DOCTYPE html> 2 <html ng-app="myapp"> 3 <head> 4 <meta ch

WeChat-SmallProgram:自定义select下拉选项框组件

1):创建组件所需的文件 2):自定义组件 CSS 及 JS 组件的wxml: <view class='com-selectBox'> <view class='com-sContent' bindtap='selectToggle'> <view class='com-sTxt'>{{nowText}}</view> <image src='../../public/img/local/down.png' class='com-sImg' anim

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos

EXTJS的combo组件的下拉选项框的高度和垂直滚动条如何设置

var testCombo = Ext.create('Ext.form.field.ComboBox', {         displayField : 'name',         valueField : 'code',         editable : false,         store : testStore,         emptyText : 'hello',         listConfig : {             maxHeight : 100,

js下拉菜单默认值为当前年份,下拉菜单的选项为当前年份往前推5年

1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: 60px;"></select> 年 2:调用下面方法即可 window.onload = function(){ var sel = document.getElementById("cx_nd"); var date = new Date(); for(va

[jQueryUI] - Chosen:select下拉选择框美化插件及问题【转】

hosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组,同时也可禁用某些选择项. 先来看下插件的效果:   跟这个比起来,原来的select样式是不是弱爆了! 马上来武装我们的select吧: 1.先把js和css文件引用到网页里面去: ? 1 2 3 <link href="js/jqueryUI/chosen/chosen.css" t

jQuery插件——下拉选择框

其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $.fn.extend({ dropdown:function (options) { return this.each(function (i, val) { $(val).css("position", "relative"); // 设置默认参数 var opts =

CSS3不一样的下拉选择框

本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content"> <div class="select"> <p att="select p">所有选项</p> <ul att="select ul"> <li data-value="所