js弹出多项选择框_js怎么能取得多选下拉框选中的多个值

Ⅰ 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弹出多项选择框

js弹出多项选择框

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

友情链接