jquery多选下拉框,jquery下拉列表选中

怎么用jquery实现在一个下拉框中添加一个“其他”的选项来代表除去已选项的其余所有未选项

容易实现啊，这里以下拉框可以多选为例，先添加一个其他的选项，给下拉款绑定一个click事件，每次选择的时候判断其他这个选项是否被选中，没有就不做处理，如果选中的话就用一个遍历把未选中的选项找出来，后面就执行你想做的操作就行，不知道我说清楚没有

创新互联-专业网站定制、快速模板网站建设、高性价比常州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式常州网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖常州地区。费用合理售后完善，十年实体公司更值得信赖。

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

script src="../js/jquery-1.3.2.js" type="text/javascript"/script

script src="../js/jquery.multiSelect.js" type="text/javascript"/script

link href="css/jquery.multiSelect.css" rel="stylesheet" type="text/css" /

我用的是jQuery MultiSelect 插件下拉多选框，

Select:

select id="control_7" name="control_7[]" multiple="multiple" size="5"

option value=""请选择/option

option value="1"性病商务通/option

option value="2"商务通/option

option value="3"QQ/option

option value="4"性病QQ/option

option value="5"企业QQ/option

option value="6"电话/option

option value="7"性病电话/option

option value="8"微信/option

option value="9"竞D1/option

option value="10"竞D2/option

option value="11"竞D3/option

option value="12"竞D4/option

option value="13"400电话/option

option value="14"挂号网/option

/select

jQuery MultiSelect 插件：

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

if(jQuery) (function($){

//渲染HTML的一个单一的选项

function renderOption(id, option)

{

var html='labelinput type="checkbox" name="' + id + '[]" value="' + option.value + '"';

if( option.selected ){

html+='checked="checked"';

}

html += ' /' + option.text + '/label';

return html;

}

// 渲染选项/的HTML optgroups

function renderOptions(id, options, o)

{

var html = "";

for(var i = 0; i options.length; i++) {

if(options[i].optgroup) {

html += 'label class="optGroup"';

if(o.optGroupSelectable) {

html += 'input type="checkbox" class="optGroup"/' + options[i].optgroup;

}

else {

html += options[i].optgroup;

}

html += '/labeldiv class="optGroupContainer"';

html += renderOptions(id, options[i].options, o);

html += '/div';

}

else {

html += renderOption(id, options[i]);

}

return html;

}

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

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

JavaScript code?

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

jquery 怎样获取select多选下拉框所有选项的值

思路：jquery 获取select多选下拉框所有选项的值，可以通过选取多选的数组进行循环判断即可。

方法如下：

function f(){

var se = document.getElementById("t");

var s = [];

for(i=0;ise.length;i++){

if(se.options[i].selected){

s.push(se[i].value);

}

alert(s);

}

select id="t" multiple="true"

option value="a"option-A/option

option value="b"option-B/option

option value="c"option-C/option

option value="d"option-D/option

/select

input type="button" value="确定" onclick="f()" /

如图所示：

怎样用jquery实现3级联动下拉框

HTML部分如下：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

html

head

title/title

script type="text/javascript" src="jslib/jquery.js"/script

script type="text/javascript" src="jslib/select.js"/script

link rel="stylesheet" type="text/css" href="mycss/select.css"

/head

body

div class="loading"

pimg src="images/data-loading.gif" alt="数据加载中"/p

p 数据加载中.../p

/div

div class="car"

span class="carname" 汽车厂商:

select

option value="" selected请选择汽车厂商/option

option value="BMW"宝马/option

option value="Audi"奥迪/option

option value="VW"大众/option

/select

img src="images/pfeil.gif" alt="数据"/span

span class="cartype" 汽车类型:

select/select

img src="images/pfeil.gif" alt="数据"/span

span class="wheeltype"轮胎类型:

select/select /span

/div

div class="carimage"

img src="images/img-loading.gif" class="carload"/

img src="" class="carimg"/

/div

/body

/html

CSS部分如下：

.loading{

text-align:center;

visibility:hidden;

}

p,.car,.carimage{

text-align:center;

}

.cartype,.wheeltype,.car img,.carimage,.carload{

display:none;

}

js部分如下：

$(function(){

//得到三个下拉框

var carnameSelect = $(".carname").children("select");

var cartypeSelect = $(".cartype").children("select");

var wheeltypeSelect = $(".wheeltype").children("select");

//给三个下拉框加下拉框的改变事件

carnameSelect.change(function(){

//1.获取当前汽车厂商下拉框所有选中的值

var carnameValue = $(this).val();

//把wheeltypeSelect隐藏起来，并且把第二个下拉框并列的图片隐藏

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

//如果值不为空则向服务器发送请求

if(carnameValue!=""){

//用post给服务器发送信息

//第一个参数是请求的url 第二个参数是请求发送的数据并且以post发送，第三个参数是回调函数就收返回数据，数据就在函数的参数中

//第四个参数是请求返回的数据格式默认是html

if(!carnameSelect.data(carnameValue)){

$.post("SelectServlet",{keyword:carnameValue,type:"top"},function(data){

if(data.length!=0){

cartypeSelect.html("");

$("option value=''请选择汽车类型/option").appendTo(cartypeSelect);

for(var i=0;idata.length;i++){

$("option value='"+data[i]+"'"+data[i]+"/option").appendTo(cartypeSelect);

}

//追加完成后，需要显示第二个下拉框和第一个下拉框后的图片

cartypeSelect.parent().show();

carnameSelect.next().show();

}else{

//如果是0 说明没有数据要返回。

//第二个下拉框隐藏，第一个下拉框后的图片隐藏。

cartypeSelect.parent().hide();

carnameSelect.next().hide();

}

//把数据缓冲起来，下次从缓冲中去取，取不到的再跟服务器进行交互，取到就直接使用，以此来减轻服务器的压力

carnameSelect.data(carnameValue,data);

},"json");

}else{

var data = carnameSelect.data(carnameValue);

if(data.length!=0){

//遍历这个数组元素

cartypeSelect.html("");

$("option value=''请选择汽车类型/option").appendTo(cartypeSelect);

for(var i=0;idata.length;i++){

//存在一个元素，汽车类型的下拉框就应该多一个元素所以又一个元素就创建一个option节点，并且追加给汽车类型下拉框

$("option value='"+data[i]+"'"+data[i]+"/option").appendTo(cartypeSelect);

}

//追加完成后，需要显示第二个下拉框和第一个下拉框的图片

cartypeSelect.parent().show();

carnameSelect.next().show();

}else{

//如果是0 说明没有数据要返回。

//第二个下拉框隐藏，第一个下拉框后的图片隐藏。

cartypeSelect.parent().hide();

carnameSelect.next().show();

}

}else{

//如果carnameValue为空也就是说选择的汽车厂商没有，那么第二个下拉框，和第一个下拉框后的图片还得继续隐藏

cartypeSelect.parent().hide();

//获取汽车厂商的下一个兄弟节点

carnameSelect.next().hide();

}

});

cartypeSelect.change(function(){

//1.获取当前汽车类型下拉框所有选中的值

var cartypeValue = $(this).val();

//隐藏汽车图片attr：先清空上次src图片路径避免下一次先显示一次.

$(".carimg").hide().attr("src","");

$(".carimage").hide();

//2.如果值不为空就向服务器发送请求

if(cartypeValue!=""){

if(!cartypeSelect.data(cartypeValue)){

$.post("SelectServlet",{keyword:cartypeValue,type:"sub"},function(data){

//可以获得请求数据进行分析处理 ,将来在Servlet中数据是以字符串数组的方式返回的

//如果返回数据的长度不是0 对数据进行分析

if(data.length!=0){

//遍历此数组元素

wheeltypeSelect.html("");

$("option value=''请选择汽车类型/option").appendTo(wheeltypeSelect);

for(var i=0;idata.length;i++){

//存在一个元素，汽车类型的下拉框就应该多一个元素所以又一个元素就创建一个option节点，并且追加给汽车类型下拉框

$("option value='"+data[i]+"'"+data[i]+"/option").appendTo(wheeltypeSelect);

}

//追加完成后，需要显示第三个下拉框和第二个下拉框后的图片

wheeltypeSelect.parent().show();

cartypeSelect.next().show();

}else{

//如果是0 说明没有数据要返回。

//第3个下拉框隐藏，第2个下拉框后的图片隐藏。

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

}

//把data数据缓冲起来

cartypeSelect.data(cartypeValue,data);

},"json");

}else{

var data = cartypeSelect.data(cartypeValue);

if(data.length!=0){

//遍历这个数组元素

wheeltypeSelect.html("");

$("option value=''请选择汽车类型/option").appendTo(wheeltypeSelect);

for(var i=0;idata.length;i++){

//存在一个元素，汽车类型的下拉框就应该多一个元素所以又一个元素就创建一个option节点，并且追加给汽车类型下拉框

$("option value='"+data[i]+"'"+data[i]+"/option").appendTo(wheeltypeSelect);

}

//追加完成后，需要显示第三个下拉框和第二个下拉框后的图片

wheeltypeSelect.parent().show();

cartypeSelect.next().show();

//追加完成后，需要显示第三个下拉框和第二个下拉框后的图片

wheeltypeSelect.parent().show();

cartypeSelect.next().show();

}else{

//如果是0 说明没有数据要返回。

//第3个下拉框隐藏，第2个下拉框后的图片隐藏。

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

}

}else{

wheeltypeSelect.parent().hide();

cartypeSelect.next().hide();

}

});

wheeltypeSelect.change(function(){

//取得选中的车轮类型的值

var wheeltypeValue = $(this).val();

//取得图片的名称

var imagename = carnameSelect.val()+"_"+cartypeSelect.val()+"_"+wheeltypeValue+".jpg";

//$(".carimg").attr("src","images/"+imagename);

//$(".carimage").show();

//js对图片进行预装载

//js对象

$(".carimg").hide();

$(".carimage").show();

$(".carload").show();

var catchimg = new Image();

//如何转换为jquery对象并处理

$(catchimg).attr("src","images/"+imagename).load(function(){

//隐藏loading图片

$(".carload").hide();

//显示汽车图片

$(".carimage").show();

$(".carimg").attr("src","images/"+imagename).show();

});

//动画效果

$(".loading").ajaxStart(function(){

$(".loading").css("visibility","visible");

$(this).animate({

opacity:1

},0);

}).ajaxStop(function(){

$(this).animate({

opacity:0

},500);

});

//别忘了引用jquery.js

怎么设置Jquery 多选下拉列表插件jquery multiselect 的高度

这个插件没有定义控件的高度的配置，控件也没有设置高度，依据内容的高度来确定控件整体高度，你可以给样式添加高度即可。不过还是修改源代码来实现高度控制好点，可以随便配置，而不用统一

2者结合也可以

css覆盖部分，你也可以修改jquery.multiselect.css这个css文件增加style里面的样式

link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" /

style

.ui-multiselect{line-height:30px;height:30px}

/style

或者修改jquery.multiselect.js文件，增加一个cHeight配置，用来控制控件的高度，找到下面的这句，修改成这样

var button = (this.button = $('button type="button"span class="ui-icon ui-icon-triangle-1-s"/span/button'))

===改成这样，判断配置了cHeight增加增加style控制高度

var button = (this.button = $('button type="button"'+(o.cHeight?' style="height:'+o.cHeight+'px"':'')+'span class="ui-icon ui-icon-triangle-1-s"/span/button'))

DEMO

$("select").multiselect({cHeight:40});

jquery动态添加下拉框选项设置下拉框样式怎么做啊

1、添加下拉框选项并设置样式

function addOption(){

$("#下拉框的id").append( "option value=\"1\"选项一/option" );

$("#下拉框的id").append( "option value=\"1\"选项二/option" );

//可以一个一个添加，也可以遍历要添加的数据循环添加

//两种方式设置样式

//1、直接设置下拉框的css

$("#下拉框的id").css({"widht":"20px","height":"10px"});

//2、或者写好css样式动态添加class

//css文件或者标签里写好css样式如：.option{width:20px;height:10px;}

$("#下拉框的id").addClass("option");

}

当前题目：jquery多选下拉框,jquery下拉列表选中
本文路径：http://myzitong.com/article/dsiijjh.html

jquery多选下拉框,jquery下拉列表选中

怎么用jquery实现 在一个下拉框中添加一个“其他”的选项来代表除去已选项的其余所有未选项

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

jquery 怎样获取select多选下拉框所有选项的值

怎样用jquery实现3级联动下拉框

怎么设置Jquery 多选下拉列表插件jquery multiselect 的高度

jquery动态添加下拉框选项设置下拉框样式怎么做啊

其他资讯

怎么用jquery实现在一个下拉框中添加一个“其他”的选项来代表除去已选项的其余所有未选项