代码之家  ›  专栏  ›  技术社区  ›  Micah Pearce

Django预填充HTML多回声字段

  •  1
  • Micah Pearce  · 技术社区  · 6 年前

    预填充多选字段的最佳方法是什么。在我看来,我正在为字段添加上下文和值。

    def get_context_data(self, *args, **kwargs):
        context = super(UserProfileUpdateView, self).get_context_data(*args, **kwargs)
        context['mystates']=user.states
    

    输出

    Alaska, Arizona, Alabama,
    

    Hmtl页

    <div class="form-group">
        <label for="id_states">Add State 2:</label> <select name="states" id="id_states"  multiple="multiple">
        {% include "accounts/snippets/states_drop_down_options.html" %}
        </select>
    </div>
    

    state\u drop\u down\u选项。htmlm公司

      <option value="AL">Alabama</option>    
      <option value="AK">Alaska</option>    
      <option value="AZ">Arizona</option>    
      <option value="AR">Arkansas</option>    
      <option value="CA">California</option>
    
    2 回复  |  直到 6 年前
        1
  •  1
  •   Nazkter    6 年前

    在每个选项中,您可以检查该选项是否在 mystates 变量:

      <option value="AL" {% if 'Alabama' in mystates %}selected{% endif%}>Alabama</option>    
      <option value="AK" {% if 'Alaska' in mystates %}selected{% endif%}>Alaska</option>    
      <option value="AZ" {% if 'Arizona' in mystates %}selected{% endif%}>Arizona</option>    
      <option value="AR" {% if 'Arkansas' in mystates %}selected{% endif%}>Arkansas</option>    
      <option value="CA" {% if 'California' in mystates %}selected{% endif%}>California</option>
    
        2
  •  0
  •   Lemayzeur    6 年前

    根据您的项目,您可以按照您认为更适合您的目的的方式进行。

    第一 : Django.forms.ModelMultipleChoiceField Django.forms.MultipleChoiceField

    第二 : The answer Nazkter是一个很好的例子,

    第三 :

    html
    (I添加 states 把某事归因于某人 select 包含的值 {{ states }} )

    <select name="states" states="{{ states }}" id="id_states"  multiple="multiple">
        {% include "accounts/snippets/states_drop_down_options.html" %}
    </select>
    

    javascript

    [].forEach.call(document.querySelectorAll('#id_states option')  , function(elm){
        var states = document.querySelector('#id_states').getAttribute("states").replace(/\s/g,'').split(",");
        if(states.indexOf(elm.innerText) > -1){
            elm.selected = true;
        }
    });