更改 function jquery 沒有向views.py發送值（沒有工作）

Question

所以我想制作一個 2 下拉菜單，但第二個下拉菜單取決於第一個下拉菜單的值

select 下拉選項的 HTML 代碼

<form class="form-horizontal  style-form" action="#">
                <div class="form-group">
                  <label class="control-label col-md-3">Database Name</label>
                  <div class="col-md-4">
                    <div class="input-group bootstrap-timepicker">
                      <div class="btn-group">
                            <select id="tableselect" style="width:425px;background-color:white;height:30px;">              
                            <!-- <li><a href="#"></a></li> -->
                               {% for table_name in obj %}
                                <option value="{{table_name.table_name}}">{{ table_name.table_name }}
                              {% endfor %}                          
                            <!-- <li><a href="#">Dropdown link</a></li> -->
                            </option>
                            </select>                    
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-md-3">Table Name</label>
                  <div class="col-md-4">
                    <div class="input-group bootstrap-timepicker">
                       <div class="btn-group">
                            <select id ="dataselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">              


                            </select>                    
                      </div>
                    </div>
                  </div>
                </div>
</form>
{% block extrajs %}

  #all the js script source I put here 

  <script>
  $(document).ready(function()
  {
    $('#tableselect').change(function() {
      var url = "{% static url 'load-data' %}";
      var table_name = $(this).val();
      $.ajax({
        url : url,
        data : {
          'table_name' = table_name
        },
        success : function(data){
          $('#dataselect').html(data);
        }
      });
    });
  });
  </script>
  {% endblock  %}

views.py我把處理請求放在這里

def load_data(request):
    table_name = request.GET.get('table_name')
    dsn_tns = cx_Oracle.makedsn('ip', 'port', sid=' ')
    conn = cx_Oracle.connect(user=r'', password='', dsn=dsn_tns)
    c = conn.cursor()
    obj2 = c.execute ('SELECT table_name FROM ALL_TABLES WHERE owner = '+table_name+'')
    context = {
        'obj2' : obj2
    }
    return render(request,data_list.html,context)

data_list.html ajax將 HTML 放入基礎 Z4C4AD5FCA2E303F74DBB1CED0

{% block extrajs %}
{% endblock  %}

{% for data in obj2 %}
<option value="{{ data.table_name }}">{{ data.table_name }}</option>
{% endfor %}

似乎當我選擇所選值時，它不會向 jquery 或視圖發送任何參數，也許更改 function 不起作用？ 有人可以幫忙嗎

Answer 1

In your javascript section, you have to do like this:-

<script>
  $(document).ready(function()
  {
    $('#tableselect').change(function() {
      var url = "{% static url 'load-data' %}";
      var table_name = $(this).val();
      $.ajax({
        url : url,
        data : {
          'table_name' = table_name
        },
        success : function(data){
            for(i=0; i<data['obj2'].length; i++){
                $('#dataselect').append('<option>'+obj2[i]+'</option>');
            }
        }
      });
    });
  });
  </script>