Chained Dropdown ในขวด รับข้อมูลจากฐานข้อมูล sqlite

ฉันกำลังพยายามรับแท็กเลือก html กับมณฑลต่างๆ (รับจากฐานข้อมูล) เมื่อผู้ใช้เลือกเคาน์ตี ฉันต้องการให้แท็กเลือกอื่นเปิดใช้งานและแสดงเมืองต่างๆ ในเคาน์ตีนั้น (ฉันมีข้อมูลในฐานข้อมูล sqlite โดยที่รหัสจังหวัดอยู่ในฐานข้อมูลเมือง) ฉันใช้ python ใน Pycharm พร้อมขวด และฉันไม่พบบทช่วยสอนที่ดีเลย

มีวิธีง่ายๆ ในการใช้ส่วนขยายบางอย่างกับขวดหรือไม่? ฉันเห็นบางอย่างเกี่ยวกับ sijax แต่ฉันไม่เคยเข้าใจวิธีใช้มันเลย

รหัสที่ฉันมีเป็นดังนี้ แต่ฉันเดาว่าส่วนเมืองจะต้องถูกสร้างขึ้นผ่านจาวาสคริปต์บางอย่าง:

        <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>

ฉันลองใช้ปลั๊กอิน "chained" -javascipt แต่มันใช้งานไม่ได้ แต่นั่นเป็นสาเหตุที่ฉันมีคลาสในแท็กตัวเลือก

ตอนนี้อำเภอและเมืองทั้งหมดถูกส่งไปยังเทมเพลต html แล้ว แต่ฉันไม่คิดว่าจะยั่งยืนในภายหลังเพราะฉันต้องการเพิ่มรายการแบบเลื่อนลงอีกรายการในเมืองด้วยดังนั้นฉันจึงต้องส่งจำนวนมาก ข้อมูลที่จะไม่มีวันถูกนำมาใช้


python javascript flask drop-down-menu sqlite
person ruggalainen    schedule 06.06.2015    source แหล่งที่มา
comment
คุณสามารถลองใช้องค์ประกอบแบบเลื่อนลง 'place holder' ซึ่งถูกซ่อนไว้ก่อน เติมและทำให้มองเห็นได้หลังจากที่ผู้ใช้เลือกเคาน์ตีในรายการดรอปดาวน์แรก Flask จะให้การตอบสนอง ส่งคืนเทมเพลต html และจาวาสคริปต์ควรทำส่วนที่เหลือ   -  person albert    schedule 06.06.2015
comment
ไม่ Flask ไม่มีทางทำได้โดยลำพังโดยไม่รีเฟรชทั้งหน้าอย่างแน่นอน ในการทำสิ่งที่คุณอธิบาย คุณจะต้องส่งคำขอ AJAX กลับไปยังเซิร์ฟเวอร์และจัดการการตอบสนองด้วย JavaScript Jinja2 ไม่สามารถช่วยคุณได้ นั่นเป็นเพียงวิธีการทำงานของ HTTP ฉันจะตอบกลับโดยละเอียดยิ่งขึ้น แต่คำถามนี้ค่อนข้างปลายเปิด และฉันไม่รู้ว่าสแต็กของคุณเป็นอย่างไร   -  person Chase Ries    schedule 07.06.2015

คำตอบ (1)


arrow_upward
2
arrow_downward

ใน head ของคุณ ให้เพิ่มตัวจัดการสำหรับการเปลี่ยนค่าของการเลือก:

<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>

สิ่งนี้ใช้ jquery.change เพื่อตรวจจับเมื่อมีการเปลี่ยนแปลงการเลือกเคาน์ตีและ jquery.ajax เพื่อส่งค่าที่เลือกนั้นไปยังแบ็กเอนด์ของคุณ ซึ่งจะมีลักษณะดังนี้:

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

จากนั้นรายการแท็ก <option> นี้จะถูกแทรกลงในการเลือกที่สองผ่าน jquery.html

person Celeo    schedule 08.06.2015
comment
ขอบคุณ! มันใช้งานได้หลังจากมีปัญหาบางอย่าง :) ทำให้ ret เป็นแบบนี้: ret += '‹option value=%i›%s‹/option›' % (entry[2], entry[0]) - person ruggalainen; 09.06.2015
comment
@ruggalainen: ไม่แน่ใจว่ายังเกี่ยวข้องหรือไม่ แต่ฉันได้เพิ่มโซลูชันอื่นที่นี่ ซึ่งใช้คำตอบที่ดีนี้โดย Celeo - person Cleb; 23.04.2018