ajaxを適用してドロップダウンでデータを取得する方法は？

Question

バックエンドとしてdjangoを使用して私の結果を照会しています。私は3回のドロップダウンを持ち、私のビューでは最初の2回のドロップダウンから3回目のドロップダウンでデータをバインドしています。 私はajaxを適用する必要があることを知っていますが、私は全く新しいAjax呼び出しに慣れています。

私の見解

はここに行く： - ：

<div class="clearfix margin_bottom30"> 
           <div class="form-group"> 
            <label class="col-sm-4 control-label text_left">University</label> 
            <div class="col-sm-8 multiselect_container"> 
             <select class="mutisel" multiple="multiple" value="university_all_list.id" 
               name="universityId" 
               id="userName" required> 
              {% for university_name in university_all_list %} 
               {% if university_name.id == university_list.id%} 

                <option value="{{ university_name.id }}" 
                  selected>{{ university_name.name }}</option> 
               {% else %} 
                <option value="{{ university_name.id }}" 
                >{{ university_name.name }}</option> 
               {% endif %} 
              {% endfor %} 

             </select> 
             <script> 
              $("select.mutisel").multipleSelect({ 
               filter: false, 
               placeholder: "Select", 
              }); 
             </script> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-sm-4 control-label text_left">User Type</label> 
            <div class="col-sm-8 multiselect_container"> 
             <select class="mutisel" multiple="multiple" value="master_user_types.id" 
               name="masterUserId" 
               id="userName" required> 
              {% for master_user in master_user_types %} 
               {% if master_user.id == university_list.id %} 

                <option value="{{ master_user.id }}" 
                  selected>{{ master_user.userType }}</option> 
               {% else %} 
                <option value="{{ master_user.id }}" 
                >{{ master_user.userType }}</option> 
               {% endif %} 
              {% endfor %} 

             </select> 
             <script> 
              $("select.mutisel").multipleSelect({ 
               filter: false, 
               placeholder: "Select", 
              }); 
             </script> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label class="col-sm-4 control-label text_left">User</label> 
            <div class="col-sm-8 multiselect_container"> 
             <select class="mutisel" multiple="multiple" value="users.id" 
               name="masterUserId" 
               id="userName" required> 
              {% for user in users %} 
                <option value="{{ user.id }}" 
                  selected>{{ users.name }}</option> 
              {% endfor %} 
             </select> 
             <script> 
              $("select.mutisel").multipleSelect({ 
               filter: false, 
               placeholder: "Select", 
              }); 
             </script> 
            </div> 
           </div> 

iの値が値を渡してみました - あなたは私が3つのドロップダウンの大学、USERTYPEユーザー命名している見ることができ

def send_notification(request): 
    try: 
     university_all_list = Universities.objects.using("cms").all() 
     master_user_types = MasterUserTypes.objects.using("cms").all() 

     university = request.POST.getlist('universityId') 
     masterUser = request.POST.getlist('masterUserId') 
     users = Users.objects.using("cms").filter(userTypeId_id__in=masterUser, universityId_id__in=university) 
     print university 
     print masterUser 
     print users 
     result_for_user =[] 
     for list in users: 
      result_for_user = list 
      print result_for_user.name 

     return render(request, 'templates/push-notification/push_notification.html', 
         {'university_all_list':university_all_list,'master_user_types':master_user_types 
         ,'result_for_user':result_for_user}) 
    except Exception as e: 
     print e 
     raise Http404 

私のHTMLをここに私は間違ったことをしています ありがとうございます

Answer 1

3番目の選択に使用するデータを取得しようとしていますか？ あなたはこれを行うことができます。

$.ajax({ 
    url: 'The url to the view', 
    type: 'GET', //Use POST if database modification would occur 
    data: { 
     'first_select': $('#first-select').val(), 
     'second_select': $('#second-select').val() 
    }, 
    success: function(data){ 
      //data contains whatever your view returns. If it's html, then add it to the select directly like $('#select').html(data); but if it's json response, Use it as you wish 
    }, 
    error: function(xhr){ 
     alert(xhr.status + ": " + xhr.responseText); 
    } 
}) 

私はちょうどあなたのページにbodyタグを閉じる前にしていないページ内にこれを追加することをお勧めします。 継承した基本テンプレートに{% block script %}{% endblock %}を定義し、そこにスクリプトを追加するためにブロックを上書きすることができます。