jquery 获取下拉选项
2014-12-11 18:18:00 weixin_34199335 阅读数 2
//联动 js
var ldData = {};
(function(){
	function ld($thisDom, param){
		var defaults = {
			url : "common/area/getAll.jhtml",//获取数据的URL
			dataId : "id",//数据ID
			dataPid : "pid",//数据父ID
			rootPid : 0,//根节点PID
			dataTitle : "请配置dataTitle属性",//显示出来的字符,其中以${title}输出data中的title字段
			showConfig : [],//select参数[{name:"aa",tipTitle:"无值时显示的数据"width:"宽度"},{name:"aa",tipTitle:"无值时显示的数据"width:"宽度"}]
			
			//--以上为必选参数
			valueAttr : "initValue",//初始值属性
			defaultValue : -1,//省默认值
			isDisabled : false,//是否设为不可用
			isReadOnly : false,//是否设为只读
			isChosen : false,//是否增加联想框
			isMultiple : false,//区域是否支持多选
			separator : ";",//开启多选时设置默认值使用的分隔符
			commonChange : function($dom, level){},//联动条触发change事件后额外掉用的方法
			lastChange : function($dom){},//区选择后的回调方法
			initFinish : function(){}//初始化完成以后回调方法
		};
		var opts = $.extend(defaults, param);
		
		//获取宽度
		var width = (Math.round(100/opts.showConfig.length) - 1) + "%";
		
		//获取title字符串
		var getTitle = function(obj, tempStr){
			var res = "";
			var i = 0;
			while(tempStr.indexOf("${", i) >= 0){
				var start = tempStr.indexOf("${", i);
				var end = tempStr.indexOf("}", i);
				if(start > i){
					res += tempStr.substring(i, start);
				}
				var el = tempStr.substring(start + 2, end);
				if(obj[el]){
					res += obj[el];
				}
				i = end + 1;
			}
			return res += tempStr.substring(i);
		}
		
		//构建option的html(dataArray:数据数组,defaultStr:默认文字,current:当先选中的数据ID)
		var buildOption = function(dataArray,defaultStr,current){
			var html = [];
			html.push('<option value="">'+defaultStr+'</option>');
			if(dataArray && $.isArray(dataArray) && dataArray.length > 0){
				for(var i = 0;i < dataArray.length; i++){
//					console.info(getTitle(dataArray[i],opts.dataTitle));
					if(current == dataArray[i][opts.dataId]){
						html.push('<option value="'+dataArray[i][opts.dataId]+'" selected>'+getTitle(dataArray[i],opts.dataTitle)+'</option>');
					}else{
						html.push('<option value="'+dataArray[i][opts.dataId]+'">'+getTitle(dataArray[i],opts.dataTitle)+'</option>');
					}
					
				}
			}
			return html.join(" ");
		}
		
		//通过ID获取数据
		var getObj = function(id){
			if(id != -1){
				for(var i = 0; i < getData().length; i ++){
					if(getData()[i][opts.dataId] == id){
						return getData()[i];
					}
				}
			}
			return undefined;
		}
		
		//通过父ID获取子集
		var getChildren = function(pid){
			var res = [];
			for(var i = 0; i < getData().length; i ++){
				if(getData()[i][opts.dataPid] == pid){
					res.push(getData()[i]);
				}
			}
			return res;
		}
		
		//选择事件方法
		var change = function($dom){
			var value = $dom.val();
			var obj = getObj(value);
			var level = parseInt($dom.attr("level"));
			var isLast = level == undefined || level == opts.showConfig.length - 1;
			if(!isLast){
				for(var i = level + 1; i < opts.showConfig.length; i++){
					$thisDom.find("select")[i].innerHTML = buildOption(undefined, opts.showConfig[i].tipTitle);
				}
				if(obj){
					$thisDom.find("select")[level + 1].innerHTML = buildOption(getChildren(obj[opts.dataId]), opts.showConfig[level + 1].tipTitle);
				}
				
			}
			opts.commonChange($dom, level);
			if(isLast){
				opts.lastChange($thisDom.find("select:last"));
			}
			if(opts.isChosen){
				$thisDom.find("select").trigger("chosen:updated");
			}
			
		}
		
		var getLevel = function(obj, level){
			if(!level) level = 0;
			if(obj){
				if(obj[opts.dataPid] == opts.rootPid){
					return level;
				}else{
					return getLevel(getObj(obj[opts.dataPid]), ++level);
				}
			}
		}
		
		var setValue = function(obj, level){
			if(obj && level >= 0){
				$thisDom.find("select")[level].innerHTML = buildOption(getChildren(obj[opts.dataPid]), opts.showConfig[level].tipTitle, obj[opts.dataId]);
				setValue(getObj(obj[opts.dataPid]), --level);
			}else{
				return;
			}
		}
		 
		var setDefault = function(id){
			var obj = getObj(id);
			if(obj){
				var level = getLevel(obj);
				setValue(obj, level);
				if(level == opts.showConfig.length - 1){
					opts.lastChange($thisDom.find("select:last"));
				}else{
					$thisDom.find("select")[level + 1].innerHTML = buildOption(getChildren(obj[opts.dataId]), opts.showConfig[level + 1].tipTitle);
				}
			}else{
				$thisDom.find("select")[0].innerHTML = buildOption(getChildren(opts.rootPid), opts.showConfig[0].tipTitle);
			}
			
			if(opts.isChosen){
				$thisDom.find("select").trigger("chosen:updated");
			}
			
		}
		
		var setDefaultValue = function(id){
			var values = [];
			if(id != -1 && opts.isMultiple){
				values = id.toString().split(opts.separator);
				setDefault(values[0]);
				var $options = $thisDom.find("select:last option");
				for(var o in $options){
					for(var v in values){
						if($options[o].value == values[v]){
							$options[o].selected = true;
						}
					}
				}
				if(opts.isChosen){
					$thisDom.find("select").trigger("chosen:updated");
				}
			}else{
				setDefault(id);
			}
		}
		
		this.setDefaultValue = setDefaultValue;
		//初始化数据
		var initData = function(){
			var html = [];
			var values = [];
			for(var i = 0; i < opts.showConfig.length; i++){
				html.push('<select class="form-control" level="'+i+'" style="width:'+(opts.showConfig[i].width?opts.showConfig[i].width:width)+'" '+(opts.showConfig[i].name?'name="'+opts.showConfig[i].name+'"':'')+'><option value="">'+opts.showConfig[i].tipTitle+'</option></select>')
			}
			$thisDom.append(html.join(" "));
			if(opts.isDisabled){
				$thisDom.find("select").attr("disabled", true);
			}
			if(opts.isReadOnly){
				$thisDom.find("select").attr("readonly", true);
			}
			if(opts.defaultValue == -1 && $thisDom.attr(opts.valueAttr)){
				opts.defaultValue = $thisDom.attr(opts.valueAttr);
			}
			if(opts.isMultiple){
				$thisDom.find("select:last").attr("multiple", true);
			}
			
			setDefaultValue(opts.defaultValue);
			
			$thisDom.on("change", "select", function(event){
				change($(event.target));
			});
			if(opts.isChosen){
				$thisDom.find("select").chosen({
					search_contains : true,
					allow_single_deselect : false
				});
			}
			opts.initFinish();
		}
		
		//获取数据
		var getData = function(url){
			if(!url){
				url = opts.url;
			}
			if(ldData[url]){
				return ldData[url];
			}else{
				$.ajax({
					url : url,
					async : false,
					dataType : "json",
					success : function(data){
						ldData[url] = data;
					}
				});
				return ldData[url];
			}
		}
		
		//插件入口
		initData();
	}
	
	$.fn.createLd = function(param){
		return new ld($(this), param);
	}
	
	//省市区联动
	$.fn.areaLd = function(param){
		var defaults = {
				url : "common/area/getAll.jhtml",//获取数据的URL
				dataId : "areaId",//数据ID
				dataPid : "pid",//数据父ID
				rootPid : 0,//根节点PID
				dataTitle : "${title}",//显示出来的字段
				showConfig : [{name:"province",tipTitle:"--省--"},{name:"city",tipTitle:"--市--"},{name:"area",tipTitle:"--区--"}]
		};
		var opts = $.extend(defaults, param);
		return new ld($(this), opts);
	}
	
	//行业类别联动
	$.fn.tradeLd = function(param){
		var defaults = {
				url : "common/trade/getLdAll.jhtml",//获取数据的URL
				dataId : "tid",//数据ID
				dataPid : "pid",//数据父ID
				dataTitle : "${tradename}",
				rootPid : 0,//根节点PID
				showConfig : [{tipTitle:"请选择"},{tipTitle:"请选择"}]
		};
		var opts = $.extend(defaults, param);
		return new ld($(this), opts);
	}
	
})(jQuery);


转载于:https://my.oschina.net/SkipperD/blog/355141

2017-12-02 13:50:55 FireflyLJW 阅读数 356
html代码:<div class="sleAreaDiv">
                            <span>选择地区</span>
                            <div class="sleAreaHidden">

                                   <div class="sleAreaLi">北京</div>

                                   <div class="sleAreaLi">上海</div>

                                   <div class="sleAreaLi">深圳</div>

                            </div>

                        </div>


css代码:

    .sleAreaDiv{width:109px;border:1px solid #ccc;height:30px;line-height:30px;text-align:left;text-indent:1em;background: #fff url(../images/logo.png) no-repeat -648px -132px;position:relative;cursor:pointer;}

   .sleAreaHidden{width:100%;border:1px solid #ccc;position:absolute;left:-1px;visibility:hidden;background:#fff;}

    .sleAreaHidden .sleAreaLi{height:25px;}


jquery代码(要先引用jquery文件):

$(document).ready(function(){

         select('sleAreaDiv','sleAreaHidden','sleAreaLi','#bf3982','#666','white');

})

function select(selectDiv,selectHidden,selectLi,bgcolor,precolor,color){
    $('.'+selectDiv).click(function(){

        $('.'+selectDiv).children('.'+selectHidden).css('visibility','hidden');   
        $(this).children('.'+selectHidden).css('visibility','visible');    
    })
    $('.'+selectLi).mouseover(function(){
        $('.'+selectLi).css({'background':'none','color':precolor});
        $(this).css({'background':bgcolor,'cursor':'pointer','color':color});
    })
    $('.'+selectLi).click(function(event){
        event.stopPropagation();//防止触发事件冒泡到父元素
        $(this).parent().css('visibility','hidden');
        $(this).parent().parent().children('span').html($(this).html());
    })
}

2018-11-07 12:34:29 qq_35898250 阅读数 744

jQuery动态加载和移除select下拉选项

我是个后端开发,工作需要在做select 联动效果的时候要动态追加选项,实现追加后,发现修改选项的时候,下级菜单会一直追加。
话不多数,直接干货
html代码示例:

<select name="name" id="id" onchange="act(this.value)">
	<option value="-1">--请选择--</option>
</select>

js代码示例:

//ajax请求成功,处理数据
if(data.success){
	/**
	 * 先移除上次追加的选项(不移除的话会一直追加)
	 * */
     $("#id >option").each(function(){
         var id = $(this).attr("value");
         if(id !=-1){
             this.remove();
		}
     });
    /**
	 * 动态追加选中的数据
	 * */
    var act = data.data;
    for(var i=0;i<act.length;i++){
        var rep = '<option value="'+act[i].value+'">'+act[i].text+'</option>'
            $("#id").append(rep);
		}
    }

只为菜鸟的自己积累

2014-04-08 10:19:54 zhengbo0 阅读数 5286
 $ ("select [id='selA'] option" ). each( function () {
    alert ( $ ( this). text ());
    if($(this).text()=='数码产品'){
    $(this).attr("selected","selected"); 
    alert("成功");
    return false;        
}                                 
})
获取option长度,然后遍历,每次做value对比, 
如果为对比,这选中,然后结束循环 
Java代码  收藏代码
  1. var count = $("#showParent option").length;  
  2.             for ( var i = 0; i < count; i++) {  
  3.                 if ($("#showParent ").get(0).options[i].value == ps) {  
  4.                     $("#showParent ").get(0).options[i].selected = true;  
  5.                     break;  
  6.                 }  
  7.             }  


2014-08-01 13:25:47 u014593098 阅读数 435
<select class="file">
    <option value="-1">--请选择--</option>
</select>

var option = $("<option>").val(11).text("周报.xls");
$(".flleName").append(option);



比如:

<select class="selector"></select>

1、设置value为pxx的项选中
  
  $(".selector").val("pxx");

2、设置text为pxx的项选中
  
 $(".selector").find("option[text='pxx']").attr("selected","selected");


    这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。
3、获取当前选中项的value
    $(".selector").val();
4、获取当前选中项的text
    $(".selector").find("option:selected").text();
    这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。
如:$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();
     // 实际的应用中,这里的option一般都是用循环生成多个了
     
var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);


});

JQuery获取checkbox选项

阅读数 183

//全选$("#btn_checkAll").click(function(){$("[name='checkbox']").attr("checked",'true');});//取消全选$("#btn_cancelCheck").click(function(){

博文 来自: lgl1170479655

jQuery获取下拉选单的值

阅读数 372

onChange="getOptionValue($('#id option').filter(':selected').val())";

博文 来自: weixin_40250060

jQuery禁止并灰显下拉选项

阅读数 49

       jQuery禁止并灰显下拉选项,是通过给option加disabled="true"属性控制的,如下示例所示:&lt;html&gt;&lt;head&gt;&lt;scripttype="text/javascript"src="jquery-1.8.3.js"&gt;&lt;/script&gt;&lt;scripttype=&qu

博文 来自: wjxbj

jquery 给select 下拉添加一条选项.

阅读数 43

--请选择-- varoption=$("").val(11).text("heisetoufa");$(".mysel").append(option);比如1、设置value为pxx的项选中$(".selector").val("pxx");2、设置text为pxx的项选中$(".sel.

博文 来自: heisetoufa

Jquery获得select下拉选项option的值:

阅读数 664

Jquery获得select下拉选项option的值:$(document).ready(function(){$("#selProv").change(function(){alert($("#selProvoption:selected").text());})});

博文 来自: zhouyong0
没有更多推荐了,返回首页