Question

所以我想创建一个2下拉列表，但第二个下拉列表取决于第一个下拉列表上的值

选择下拉选项的

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放入基本html

{% block extrajs %}
{% endblock  %}

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

好像当我选择选定的值时，它不会将任何参数发送到jquery或视图，也许更改功能没有起作用？有人可以帮忙吗

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>

更改功能jQuery没有发送值到views.py（努力工作）

1 个答案: