jQuery插件 distpicker实现多次赋值

项目里需要实现省市区联动选择功能，使用了一个jQuery插件dispicker，记录一下使用过程中遇到的问题和解决办法。

需要要实现的功能就两个：打开modal框时设置地址，点击重置按钮时重置地址

原本以为这是一个非常容易实现的功能，毕竟distpicker有自身赋值的方法，直接多次调用就好了嘛。结果，使用起来才发现自己真是too naive。

• 前台样式

    <span id="aChange_aDetail">
	<select id="aChange_province"></select>
	<select id="aChange_city"></select>
	<select id="aChange_country"></select>
    </span>

• 调用插件的赋值方法

    $('#aChange_aDetail').distpicker({
	    province: data.province,
	    city: data.city,
	    district: data.country
    });

问题就这么猝不及防的来了--同一个js文件里，distpicker的赋值方法只能使用一次！！也就是说我无法多次对distpicker进行赋值。

用到这里的我，尼克杨-头左下方三个小问号-右上方三个小问号.jpg

• 开始疯狂翻看文档和百度，伟大的互联网冲浪大佬们的解决办法是在初始化之前调用$().dispicker("destroy)方法，即先对当前实例进行销毁

    $('#aChange_aDetail').dispicker("destroy)
    $('#aChange_aDetail').distpicker({
		province: data.province,
		city: data.city,
		district: data.country,
		placeholder: false
    });

于是我满怀信心的任务问题已经被解决的时候，保存，刷新，开始操作

完全没用啊摔！

无奈只能开始暴力操作--你不让我改，我就删了你全家 ！！

• 写一个函数，在每次赋值之前将选择器全部删除在添加

    function distpickerReset() {
	var parent = $('#aChange_aDetail').parent('li');
	parent.find('#aChange_aDetail').remove();
	var dist =
		'<span id="aChange_aDetail">' +
		'<select id="aChange_province"></select>' +
		'<select id="aChange_city"></select>' +
		'<select id="aChange_country"></select>' +
		'</span>'
	parent.append(dist)
    }

• 再在每次赋值前先调用重置函数

    distpickerReset()
    $('#aChange_aDetail').distpicker({
        ...
    })

保存，刷新，运行，完美解决

回头一下，我依稀觉得事情不会这么简单，可能是有更官方、更简洁、更高端的解决方法，我却没有发现，谁叫我只是个菜鸡呢

再回头看看自己的博客，短短的文字里飘荡着无数的表情包，我觉得自己可能不止是个菜鸡，还是个神经失常的菜鸡

毕竟菜，才是最纯粹的快乐##