html selectドロップダウン・ボックスページをリフレッシュした後、前回選択した値を保持

2872 ワード

一般的なシーン
コンビネーション条件クエリークエリー/リフレッシュページをクリックすると、input入力ボックス/チェックボックスなどを含むコンポーネントはフロントエンドでvalue=「{{id}}」を設定でき、バックグラウンドから送信されるデータには対応するフィールドが含まれており、リフレッシュ後に前回の値を保持し、ユーザー体験を向上させることができるが、selectはそうはできないことが分かった.そのvalue値は約束されてバックグラウンドに渡されたもので、バックグラウンドは転送できますが、直接表示できません.
ネットで検索した資料は様々で、自分でjqueryで実現しました.効果:
 
htmlコードセグメント

js
	
			$(function(){
				//         
				var city_id= {{input_cityid}} 
				// alert(city_id)
				//   select  
				$("#input_cityid").val(city_id)
		})
	

バックグラウンドは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で実現できるので、後でまとめましょう.