Dropdown Berantai di labu, dapatkan data dari database sqlite

Saya mencoba untuk mendapatkan tag pilih html dengan wilayah yang berbeda (mendapatkan dari database), ketika pengguna telah memilih suatu wilayah, saya ingin tag pilihan lain untuk mengaktifkan dan menampilkan kota-kota di wilayah itu (saya memiliki data dalam database sqlite, dimana id kabupaten ada di database kota). Saya menggunakan python di Pycharm, dengan labu dan saya belum menemukan tutorial yang bagus.

Apakah ada cara mudah untuk menggunakan beberapa ekstensi ke labu? Saya melihat sesuatu tentang sijax, tapi saya tidak pernah mengerti cara menggunakannya.

Kode yang saya miliki kira-kira seperti ini, tapi saya kira bagian kota harus dibuat melalui beberapa hal javascript:

        <div class="form-group">
            <label for="inputCounty">County</label>
            <select class="form-control" id="select_county" name="select_county">
                <option value="">Choose county</option>
                {% for county in counties %}
                    <option value="{{ county.id }}">{{ county.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label for="inputCity">City</label>
            <select class="form-control" id="select_city" name="select_city">
                <option value="">Choose city</option>
                {% for city in cities %}
                    <option value="{{ city.id }}" class="{{ city.county }}">{{ city.name }}</option>
                {% endfor %}
            </select>
        </div>

Saya mencoba plugin "rantai" -javascipt tetapi tidak berhasil, tapi itu sebabnya saya memiliki kelas di tag opsi.

Saat ini kabupaten dan semua kota dikirim ke template html, tapi menurut saya itu tidak akan berkelanjutan nanti karena saya ingin menambahkan dropdown lain dengan tempat-tempat di kota juga, jadi saya harus mengirim banyak data yang tidak akan pernah digunakan.


python javascript flask drop-down-menu sqlite
person ruggalainen    schedule 06.06.2015    source sumber
comment
Anda dapat mencoba menerapkan elemen dropdown 'placeholder' yang disembunyikan terlebih dahulu. Isi dan tampilkan setelah pengguna memilih wilayah di daftar tarik-turun pertama. Flask hanya akan memberikan resp. kembalikan template html dan javascript harus melakukan sisanya   -  person albert    schedule 06.06.2015
comment
Tidak, Flask tidak mungkin melakukan ini sendirian tanpa menyegarkan seluruh halaman. Untuk melakukan apa yang Anda jelaskan, Anda harus mengirim permintaan AJAX kembali ke server dan memanipulasi respons dengan JavaScript. Jinja2 tidak dapat membantu Anda di sana; itulah cara kerja HTTP. Saya akan menjawab dengan lebih detail, tetapi pertanyaan ini cukup terbuka dan saya tidak tahu seperti apa tumpukan Anda.   -  person Chase Ries    schedule 07.06.2015

Jawaban (1)


arrow_upward
2
arrow_downward

Di head Anda, tambahkan pengendali untuk mengubah nilai pilihan:

<script type="text/javascript">
    $("#select_county").change(function() {
        $.ajax({
            type: "POST",
            url: "{{ url_for('select_county') }}",
            data: {
                county: $("#select_county").val()
            },
            success: function(data) {
                $("#select_city").html(data);
            }
        });
    });
</script>

Ini menggunakan jquery.change untuk mendeteksi kapan pemilihan wilayah diubah dan jquery.ajax untuk mengirimkan nilai yang dipilih ke backend Anda, yang akan menjadi seperti:

@app.route('/select_county', methods=['POST'])
def select_county():
    ret = ''
    for entry in ...your_database_query...:
        ret += '<option value="{}">{}</option>'.format(entry)
    return ret

Daftar tag <option> ini kemudian dimasukkan ke dalam pilihan kedua melalui jquery.html.

person Celeo    schedule 08.06.2015
comment
Terima kasih! Ini berhasil setelah beberapa masalah :) Membuat ret seperti ini: ret += '‹option value=%i›%s‹/option›' % (entry[2], entry[0]) - person ruggalainen; 09.06.2015
comment
@ruggalainen: Tidak yakin apakah masih relevan, tapi saya menambahkan solusi lain di sini yang memanfaatkan jawaban bagus dari Celeo ini. - person Cleb; 23.04.2018