HTML form selectで「色」を選択させるコードを
Djangoの中で{% for val in list%}を用いて記述しています。
その際のJQueryでも{% for val in list%}を用いてリストをまとめたいのですがどうすべきでしょうか?
(python側のリスト内でカラーを増やすだけで、HTML側の選択肢が増える+画像を表示できる動きを希望している)
python
1var_html = {"color" : ["red","blue","green"] } 2 3~<省略>~ 4 5return render(request,'test.html', var_html)
html
1<!--- [test.html] ---> 2カラー:<br> 3<select name="color" size="1"> 4 {% for val in color %} 5 <option value="{{val}}" >{{val}}</option> 6 {% endfor %} 7</select> 8<div id="viewarea"></div> 9 10~<省略>~ 11<!--- ↑ここまでは希望通りの動きになっています ---> 12 13 14<script type="text/javascript"> 15$(function(){ 16 $('select[name=color]').on('change',function(){ 17 18 var imglist={ 19 "red":"red.png", 20 "blue":"blue.png", 21 "green":"green.png"}; 22/* 23この var imglist = {}; が 24上記のままであるとpython側で「色」を増やす度にHTMLを修正しなくてはならないので、 25下記のようなイメージでまとめたいのですが、 26試したところ表示されませんでした(jQueryの知識に疎いです;) 27 28 {% for val in color %} 29 var imglist["{{val}}"] = "{{val}}.png" 30 {% endfor %} 31 32*/ 33 $('#viewarea img').remove(); 34 if(typeof imglist[$(this).val()]!=="undefined"){ 35 $('#viewarea').append($('<img>').attr('src',imglist[$(this).val()])); 36 } 37 }).trigger('change'); 38}); 39</script>
どのように記述すべきでしょうか?
宜しくお願い致します!
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。