您当前的位置：首页>工作

select下拉选项无限联动赋值另类解决办法

作者:: 蒲松林
发布时间:: 2018年10月10日
所在分类:: 工作
评论数：: 暂无

从jq22上找到一个不错的select下拉无限联动的jq代码，算是city-picker的改进版。由于自己对前端的不熟悉，在使用过程中，编辑信息需要对select进行赋值。试了好几次都没有完美的解决。最后只能用一个比较另类或者说是无奈的解决办法吧。在编辑信息时，先将要修改的联动值用文本显示，通过按钮点击进行编辑切换，再调出select下拉选项。这种样的话就不用修改原JQ代码，进行中转实现功能。

select下拉无限联动项目实例代码：

<div class="form-group">
	<label class="col-xs-12 col-sm-3 col-md-2 col-lg-2 control-label">宠物分类</label>
	<div class="col-sm-8">
		<div id="aaaa">
			<label class="control-label">
				{loop $type_rs $k $t}
				{$t['name']}
				{if count($k)<>$k}->{/if}
				{/loop}
			</label>
			<a href="javascript:void(0);" id="bt" class="btn btn-xs btn-primary">更改</a>
		</div>
		<div id="bbbb" style="display:none;"></div>
		<script>
			$("#bt").click(function(){
				$("#aaaa").hide();
				$("#bbbb").show();
			})
			
		</script>

			
			<script>
					(function ($) {
						$.fn.AddSelect = function (opation) {
							var _arg = $.extend({
								data: ""
								, id: "a"
								, name: "b"
							  , link: "c"
							}, opation);
							var _this1 = this;
							if (_arg.data) {
								var _dt = _arg.data,_a = _arg.id,_b=_arg.name,_c=_arg.link;
								var _html = "";
								var _prams = []
								_prams[0] = _dt;
								_html += '<select>'; //初级设置
								_html += '<option>请选择</option>';
								for (var i = 0; i < _dt.length; i++) {
									_html += '<option value="' + _dt[i][_a] + '|' + (_dt[i][_c] == null ? null : i) + '">' + _dt[i][_b] + '</option>';
								}
								_html += '</select>';
								$(_this1).html(_html);

								function _select1() {
									//$(_this1).children("select").change(function () {
									$(_this1).children("select").change(function () {
										var _this2 = this;
										var _val = $(_this2).val().split("|")[1];
										$(_this2).nextAll("select").remove();
										if (_val % 1 == 0) {
											var _index = $(_this2).index();
											var _str = "";
											_prams[_index + 1] = _prams[_index][_val][_c];//一条线放一个数组 不同线重置
											//console.log(_prams[_index + 1])
											_str += '<select>';
											_str += '<option>请选择</option>';
											for (var i = 0; i < _prams[_index + 1].length; i++) {
												_str += '<option value="' + _prams[_index + 1][i][_a] + '|' + (_prams[_index + 1][i][_c] == null ? null : i) + '">' + _prams[_index + 1][i][_b] + '</option>';
											}
											_str += '</select>';
											$(_this2).after(_str);
											$(_this1).children("select").unbind("change");
											_select1();
										}
									})
								}
								_select1();
							}
						}
					})(jQuery)
			
					var _json = [{"id":"1","uniacid":"1","parent_id":"0","name":"\u72d7\u72d7","son":[{"id":"2","uniacid":"1","parent_id":"1","name":"\u4e2d\u534e\u7530\u56ed\u72ac"},{"id":"4","uniacid":"1","parent_id":"1","name":"\u67f4\u72ac"},{"id":"5","uniacid":"1","parent_id":"1","name":"\u54c8\u58eb\u5947"},{"id":"6","uniacid":"1","parent_id":"1","name":"\u91d1\u6bdb\u72ac"}]},{"id":"3","uniacid":"1","parent_id":"0","name":"\u732b\u732b\u732b","son":[{"id":"7","uniacid":"1","parent_id":"3","name":"\u52a0\u83f2\u732b\u732b"}]}]								
			
					//$("#gggg").AddTree({
					//    data: _json
					//})
					$("#bbbb").AddSelect({
						data: _json
						, id: "id"
						, name: "name"
						, link: "son"
					})
				</script>
		
	</div>
</div>

{loop $type_rs $k $t}

{$t['name']}

{if count($k)<>$k}->{/if}

{/loop}

</label>

</div>

$("#bt").click(function(){

$("#aaaa").hide();

$("#bbbb").show();

})

</script>

(function ($) {

$.fn.AddSelect = function (opation) {

var _arg = $.extend({

data: ""

, id: "a"

, name: "b"

, link: "c"

}, opation);

var _this1 = this;

if (_arg.data) {

var _dt = _arg.data,_a = _arg.id,_b=_arg.name,_c=_arg.link;

var _html = "";

var _prams = []

_prams[0] = _dt;

_html += '<select>'; //初级设置

_html += '<option>请选择</option>';

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

_html += '<option value="' + _dt[i][_a] + '|' + (_dt[i][_c] == null ? null : i) + '">' + _dt[i][_b] + '</option>';

}

_html += '</select>';

$(_this1).html(_html);

function _select1() {

//$(_this1).children("select").change(function () {

$(_this1).children("select").change(function () {

var _this2 = this;

var _val = $(_this2).val().split("|")[1];

$(_this2).nextAll("select").remove();

if (_val % 1 == 0) {

var _index = $(_this2).index();

var _str = "";

_prams[_index + 1] = _prams[_index][_val][_c];//一条线放一个数组不同线重置

//console.log(_prams[_index + 1])

_str += '<select>';

_str += '<option>请选择</option>';

for (var i = 0; i < _prams[_index + 1].length; i++) {

_str += '<option value="' + _prams[_index + 1][i][_a] + '|' + (_prams[_index + 1][i][_c] == null ? null : i) + '">' + _prams[_index + 1][i][_b] + '</option>';

}

_str += '</select>';

$(_this2).after(_str);

$(_this1).children("select").unbind("change");

_select1();

}

})

}

_select1();

}

})(jQuery)

var _json = [{"id":"1","uniacid":"1","parent_id":"0","name":"\u72d7\u72d7","son":[{"id":"2","uniacid":"1","parent_id":"1","name":"\u4e2d\u534e\u7530\u56ed\u72ac"},{"id":"4","uniacid":"1","parent_id":"1","name":"\u67f4\u72ac"},{"id":"5","uniacid":"1","parent_id":"1","name":"\u54c8\u58eb\u5947"},{"id":"6","uniacid":"1","parent_id":"1","name":"\u91d1\u6bdb\u72ac"}]},{"id":"3","uniacid":"1","parent_id":"0","name":"\u732b\u732b\u732b","son":[{"id":"7","uniacid":"1","parent_id":"3","name":"\u52a0\u83f2\u732b\u732b"}]}]

//$("#gggg").AddTree({

// data: _json

//})

$("#bbbb").AddSelect({

data: _json

, id: "id"

, name: "name"

, link: "son"

})

</script>

</div>

数据实例就不放了，自行json_decode array看吧,无限下级通过son进行扩展。

Good luck!

标签

你可能感兴趣的文章：

暂无相关文章

关于jquery clone()复制后的母元素显示隐藏问题修改PHP qrcode固定生成的二维码图片尺寸

发表评论取消回复

要发表评论，您必须先登录。

select下拉选项无限联动赋值另类解决办法

你可能感兴趣的文章：

发表评论 取消回复

发表评论取消回复