select下拉选项无限联动赋值另类解决办法
- 蒲松林
- 发布时间:
- 2018年10月10日
- 所在分类:
- 工作
- 评论数:
- 暂无
从jq22上找到一个不错的select下拉无限联动的jq代码,算是city-picker的改进版。由于自己对前端的不熟悉,在使用过程中,编辑信息需要对select进行赋值。试了好几次都没有完美的解决。最后只能用一个比较另类或者说是无奈的解决办法吧。在编辑信息时,先将要修改的联动值用文本显示,通过按钮点击进行编辑切换,再调出select下拉选项。这种样的话就不用修改原JQ代码,进行中转实现功能。
select下拉无限联动项目实例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<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> |
数据实例就不放了,自行json_decode array看吧,无限下级通过son进行扩展。
Good luck!
- 标签
你可能感兴趣的文章:
- 暂无相关文章