导航:首页 > 编程语言 > js弹出多项选择框

js弹出多项选择框

 发布时间：2024-10-18 07:40:32

Ⅰ js怎么实现能多选的下拉框，点一个选中一个

Hi，你的操作就是当已经选择过的情况下你需要删除掉数组的相应值。
我帮你改写了一下，数组值需要存储选框的下标就可以了的。

<script language="javascript">
var sel = [];
function OnClick() {
var i_ts_desc = document.getElementById("i_ts_desc");
var index = i_ts_desc.selectedIndex;
var iHas = -1;
sel.sort();
for (var i = 0; i < sel.length; i++) {
if (sel[i] == index) {
iHas = i;
} else {
i_ts_desc[sel[i]].selected = true;
}
}
if (iHas == -1) {
sel.push(index);
i_ts_desc[index].selected = true;
} else {
sel.splice(iHas, 1);
i_ts_desc[index].selected = false;
}
}
</script>
<select id="i_ts_desc" multiple="multiple" onclick="OnClick();" >
<option value="A">0</option>
<option value="B">1</option>
<option value="C">2</option>
<option value="D">3</option>
<option value="E">4</option>
<option value="F">5</option>
</select>

Ⅱ js实现两个下拉框联动

这类问题貌似蛮多的。
不过是这个纯HTML需要么？没有数据交互？与服务器数据交互得重新封装的。

下面是纯HTML用的JS。
<html>
请选择：
<select id="test2" onchange="setSel(this);">
<option value='1'>1</option>
<option value='2'>2</option>
</select>
注意这里：
<select id="test1">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>2</option>
</select>

这里添加了（注意）：
<select id="test3">

</select>

<script>

function setSel(obj){

var s=obj.value;
var f=document.getElementById("test1");
var obj=document.getElementById("test3");
/*循环 相应变的select*/
for(i=0;i<f.options.length;i++){
/*判断值相等的，也可以判断显示的f.options[i].test*/
if(f.options[i].value==s){
f.options[i].selected="selected";//选中
obj.options.add(new Option(f.options[i].text,f.options[i].value)); //这个兼容IE与firefox
}
}

}

</script>
</html>

Ⅲ jquery.multiselect.js 实现下拉框多选怎么设置默认全部选中下拉框的值

<scriptsrc="../js/jquery-1.3.2.js"type="text/javascript"></script>
<scriptsrc="../js/jquery.multiSelect.js"type="text/javascript"></script>
<linkhref="css/jquery.multiSelect.css"rel="stylesheet"type="text/css"/>
我用的是jQueryMultiSelect插件下拉多选框，
Select:
<selectid="control_7"name="control_7[]"multiple="multiple"size="5">
<optionvalue="">请选择</option>
<optionvalue="1">性病商务通</option>
<optionvalue="2">商务通</option>
<optionvalue="3">QQ</option>
<optionvalue="4">性病QQ</option>
<optionvalue="5">企业QQ</option>
<optionvalue="6">电话</option>
<optionvalue="7">性病电话</option>
<optionvalue="8">微信</option>
<optionvalue="9">竞D1</option>
<optionvalue="10">竞D2</option>
<optionvalue="11">竞D3</option>
<optionvalue="12">竞D4</option>
<optionvalue="13">400电话</option>
<optionvalue="14">挂号网</option>
</select>
jQueryMultiSelect插件：

.......................

if(jQuery)(function($){

//渲染HTML的一个单一的选项
functionrenderOption(id,option)
{
varhtml='<label><inputtype="checkbox"name="'+id+'[]"value="'+option.value+'"';
if(option.selected){
html+='checked="checked"';
}
html+='/>'+option.text+'</label>';
returnhtml;
}

//渲染选项/的HTMLoptgroups
functionrenderOptions(id,options,o)
{
varhtml="";
for(vari=0;i<options.length;i++){
if(options[i].optgroup){
html+='<labelclass="optGroup">';
if(o.optGroupSelectable){
html+='<inputtype="checkbox"class="optGroup"/>'+options[i].optgroup;

}
else{
html+=options[i].optgroup;
}

html+='</label><divclass="optGroupContainer">';
html+=renderOptions(id,options[i].options,o);
html+='</div>';
}
else{
html+=renderOption(id,options[i]);
}
}
returnhtml;
}

我提交的时候都变没了,就一个了，我想要的是我选中几个默认选中就是几个。

在调用这个插件前用jquery设置optin的selected属性

JavaScript code?


varv='1,2,3'//这个为保存的值，自己从数据库读取来赋值给v变量v=','+v+',';//添加分隔符号，好indexOf进行比较vararr=v.split(',');$('#control_7option').each(function(){if(v.indexOf(','+this.value+',')!=-1)this.selected=true;});//再调用插件初始化select对象

Ⅳ Extjs怎么实现下拉框多选

|

1、扩展js类库，在项目中建立一个 js文件，命名为:xxx.js 其代码为

if('function'!==typeofRegExp.escape)
{
RegExp.escape=function(s)
{
if('string'!==typeofs)
{
returns;
}
returns.replace(/([.*+?^=!:${}()|[]/\])/g,'\$1');
};
}

Ext.ns('Ext.form');

Ext.form.MultiSelect=Ext.extend(Ext.form.ComboBox,
{
checkField:'checked',
multi:true,
separator:',',
initComponent:function()
{
if(!this.tpl)
{
this.tpl='<tplfor=".">'+'<divclass="x-combo-list-item">'
+'<imgsrc="'+Ext.BLANK_IMAGE_URL+'"'
+'class="ux-MultiSelect-iconux-MultiSelect-icon-'
+'{[values.'+this.checkField+'?"checked":"unchecked"'
+']}">'
+'{[values.'+this.displayField+']}'
+'</div>'
+'</tpl>';
}

Ext.form.MultiSelect.superclass.initComponent.apply(this,arguments);

this.on(
{
scope:this,
beforequery:this.onBeforeQuery,
blur:this.onRealBlur
});

this.onLoad=this.onLoad.createSequence(function()
{
if(this.el)
{
varv=this.el.dom.value;
this.el.dom.value='';
this.el.dom.value=v;
}
});
},
initEvents:function()
{
Ext.form.MultiSelect.superclass.initEvents.apply(this,arguments);
this.keyNav.tab=false;
},
beforeBlur:function()
{
},
postBlur:function()
{
},

clearValue:function()
{
this.value='';
this.setRawValue(this.value);
this.store.clearFilter();
this.store.each(function(r)
{
r.set(this.checkField,false);
},this);
if(this.hiddenField)
{
this.hiddenField.value='';
}
this.applyEmptyText();
},
getCheckedDisplay:function()
{
varre=newRegExp(this.separator,"g");
returnthis.getCheckedValue(this.displayField).replace(re,this.separator+'');
},
getCheckedValue:function(field)
{
field=field||this.valueField;
varc=[];
varsnapshot=this.store.snapshot||this.store.data;
snapshot.each(function(r)
{
if(r.get(this.checkField))
{
c.push(r.get(field));
}
},this);

returnc.join(this.separator);
},
onBeforeQuery:function(qe)
{
qe.query=qe.query.replace(newRegExp(RegExp.escape(this.getCheckedDisplay())+'['+this.separator+']*'),'');
},
onRealBlur:function()
{
this.list.hide();
varrv=this.getRawValue();
varrva=rv.split(newRegExp(RegExp.escape(this.separator)+'*'));
varva=[];
varsnapshot=this.store.snapshot||this.store.data;

Ext.each(rva,function(v)
{
snapshot.each(function(r)
{
if(v===r.get(this.displayField))
{
va.push(r.get(this.valueField));
}
},this);
},this);
this.setValue(va.join(this.separator));
this.store.clearFilter();
},
onSelect:function(record,index)
{
if(this.fireEvent('beforeselect',this,record,index)!==false)
{
record.set(this.checkField,!record.get(this.checkField));

if(this.store.isFiltered())
{
this.doQuery(this.allQuery);
}

if(this.multi)
{
if(record.get("key")=="---"&&record.get(this.checkField))
{
this.setValue("---");
}
else
{
this.setValue(this.getCheckedValue());
}
}
else
{
this.clearValue();
this.value=record.get(this.valueField);
this.setRawValue(record.get(this.displayField));
this.list.hide();
}

this.fireEvent('select',this,record,index);
}
},
setValue:function(v)
{
if(v)
{
v=''+v;
if(this.valueField)
{
this.store.clearFilter();
this.store.each(function(r)
{
varchecked=!(!v.match('(^|'+this.separator+')'
+RegExp.escape(r.get(this.valueField))
+'('+this.separator+'|$)'));
r.set(this.checkField,checked);
},this);
this.value=this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if(this.hiddenField)
{
this.hiddenField.value=this.value;
}
}
else
{
this.value=v;
this.setRawValue(v);
if(this.hiddenField)
{
this.hiddenField.value=v;
}
}
if(this.el)
{
this.el.removeClass(this.emptyClass);
}
}
else
{
this.clearValue();
}
},
selectAll:function()
{
this.store.each(function(record)
{
record.set(this.checkField,true);
},this);
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
},
deselectAll:function()
{
this.clearValue();
}
});
Ext.reg('multiSelect',Ext.form.MultiSelect);

2、在ext-all.css文件最后，加入css样式

.ux-MultiSelect-icon{width:16px;height:16px;float:left;background-position:-1px-1px!important;background-repeat:no-repeat!important;}
.ux-MultiSelect-icon-checked{background:transparenturl(../images/default/menu/checked.gif);}
.ux-MultiSelect-icon-unchecked{background:transparenturl(../images/default/menu/unchecked.gif);}

3、使用

varDepartUserStore=newExt.data.Store(
{
proxy:newExt.data.HttpProxy(
{
url:'/Web/Manage/DeskTop/JSON/ScheleManager/GetSimpleDepartUserInfo.aspx'
}),
//读取Json
reader:newExt.data.JsonReader(
{totalProperty:"totalCount",root:"root"},
[
{name:'UserId',type:'int'},
{name:'UserName',type:'string'}
])
});

varDepartUserCbox=newExt.form.MultiSelect(
{
fieldLabel:'姓名',
labelStyle:'width:80px',
width:150,
editable:false,
id:'DepartUserDS',
hiddenName:'DepartUserIdDS',
store:DepartUserStore,
emptyText:'--请选择--',
allowBlank:false,
blankText:'请选择',
mode:'remote',
displayField:'UserName',
valueField:'UserId',
triggerAction:'all',
selectOnFocus:true,
listWidth:200
});

DepartUserStore.on('load',function()
{
DepartUserCbox.selectAll();//全选
});

DepartUserStore.load();

Ⅳ js怎么能取得多选下拉框选中的多个值

方法：获取多选下拉框对象数组→循环判断option选项的selected属性（true为选中，false为未选中）→使用value属性取出选中项的值。实例演示如下：

1、HTML结构

<selectid="test"multiple="true">
	<optionvalue="option-A">option-A</option>
	<optionvalue="option-B">option-B</option>
	<optionvalue="option-C">option-C</option>
	<optionvalue="option-D">option-D</option>
</select>
<inputtype="button"value="确定"onclick="fun()"/>

2、javascript代码

functionfun(){
	varselect=document.getElementById("test");
	varstr=[];
	for(i=0;i<select.length;i++){
		if(select.options[i].selected){
			str.push(select[i].value);
		}
	}
	alert(str);
}

3、效果演示

阅读全文

与js弹出多项选择框相关的资料

热点内容
ps入门必备文件 浏览：348
以前的相亲网站怎么没有了 浏览：15
苹果6耳机听歌有滋滋声 浏览：768
怎么彻底删除linux文件 浏览：379
编程中字体的颜色是什么意思 浏览：534
网站关键词多少个字符 浏览：917
汇川am系列用什么编程 浏览：41
笔记本win10我的电脑在哪里打开摄像头 浏览：827
医院单位基本工资去哪个app查询 浏览：18
css源码应该用什么文件 浏览：915
编程ts是什么意思呢 浏览：509
c盘cad占用空间的文件 浏览：89
不锈钢大小头模具如何编程 浏览：972
什么格式的配置文件比较主流 浏览：984
增加目录word 浏览：5
提取不相邻两列数据如何做图表 浏览：45
r9s支持的网络制式 浏览：633
什么是提交事务的编程 浏览：237
win10打字卡住 浏览：774
linux普通用户关机 浏览：114

友情链接