Допустим есть два выпадающих списка.
В зависимости от значений в первом списке есть список значений второго. Хочу сделать чтоб при выборе значения в первом, второй сразу обновлялся, без кнопки сабмит, с кнопкой знаю как сделать.
При помощи AJAX отсылаю значение первого списка на сервер, собственно как после этого обновить темплэйт, с уже новыми данными из базы.
HTML
<select id="select_car" name = "select_car"> {%for item in cars: %} <option value="{{item.id}}">{{item.name}}</option> {%endfor%}</td> <script> $('#select_car').change(function() { var data = $( "#select_car :selected" ).val(); $.ajax({ type: 'POST', url: "{{url_for('index')}}", contentType: 'application/json;charset=UTF-8', data: JSON.stringify(data), success: function(result) { console.log(result); } }); }); </script> <td><select id="select_model" name = "select_model"> {%for item in models: %} <option>{{item.name}}</option> {%endfor%}
Вот функция в питоне
@app.route('/', methods=['GET', 'POST']) @app.route('/index', methods=['GET', 'POST']) def index(id_car = 1): if request.method == 'GET': cars = tables.Car.query.all() car = tables.Car.query.get(id_car) models = tables.Model.query.filter_by(car_id=car.id).all() return render_template('index.html', cars=cars, models=models) elif request.method == 'POST': id_car = request.json cars = tables.Car.query.all() car = tables.Car.query.get(id_car) models = tables.Model.query.filter_by(car_id=car.id).all() return render_template('index.html', cars=cars, models=models)