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({
        ...
    })

保存，刷新，運行，完美解決

回頭一下，我依稀覺得事情不會這么簡單，可能是有更官方、更簡潔、更高端的解決方法，我卻沒有發現，誰叫我只是個菜雞呢

再回頭看看自己的博客，短短的文字里飄盪着無數的表情包，我覺得自己可能不止是個菜雞，還是個神經失常的菜雞

畢竟菜，才是最純粹的快樂##