html select 下拉框刷新頁面後保留上一次選擇的值

常用場景

組合條件查詢點擊查詢/刷新頁面，包括input輸入框\複選框等在內的組件都可以通過前端設置value="{{id}}"，後臺發送的數據包括對應的字段，從而實現刷新後保留上一次的值，提高用戶體驗，但是發現select不能這麼做，它的value值是約定好並傳給後臺的，後臺可以傳回來，但無法直接顯示。

網上搜的資料五花八門，自己用jquery實現了，效果：

 

html代碼段

<select  class="form-control" name="input_cityid" id="input_cityid" >
		<option value="0" selected >全國</option>
		<option value="1" >北京</option>
		<option value="2">上海</option>
		<option value="3">廣州</option>
		<option value="4">深圳</option>
		<option value="5">杭州</option>
		<option value="6" >蘇州</option>
		<option value="7">南京</option>
		<option value="8">成都</option>
		<option value="9">重慶</option>
		<option value="10">武漢</option>
</select>

js

	<script type="text/javascript">
			$(function(){
				// 接收後臺傳入的值
				var city_id= {{input_cityid}} 
				// alert(city_id)
				// 設置select的值
				$("#input_cityid").val(city_id)
		})
	</script>

後臺是django，函數如下

def search_handle(request):
    post = request.POST
    input_content=post.get('input_content').strip()
    input_cityid=post.get('input_cityid',0)
    # print(input_cityid)
    # print(input_content)
    city='全國'
    if input_cityid =='0':
        city='全國'
        params = ('%' + input_content + '%')
        cursor = connection.cursor()
        cursor.execute(
            "SELECT *  FROM `event` where eventTilte like %s" ,params )
    else:
        if input_cityid == '1':
            city='北京'
        elif input_cityid == '2':
            city='上海'
        elif input_cityid == '3':
            city='廣州'
        elif input_cityid == '4':
            city='深圳'
        elif input_cityid == '5':
            city='杭州'
        elif input_cityid == '6':
            city='蘇州'
        elif input_cityid == '7':
            city='南京'
        elif input_cityid == '8':
            city='成都'
        elif input_cityid == '9':
            city='重慶'
        elif input_cityid == '10':
            city='武漢'
        params = ('%' + input_content + '%','%' + city + '%')
        cursor = connection.cursor()
        cursor.execute(
            "SELECT *  FROM `event` where eventTilte like %s and eventAddress like %s" ,params )
    event_list = cursor.fetchall()   
    cursor.close()
    content = {'event_list':event_list,'input_content':input_content,'input_cityid':input_cityid}
    return render(request,'c_activity/search.html',content)

另外還可以通過ajax來實現，後面再總結吧。。