尝试从 select 标记中获取值时返回的 URL

Question

我是flask和 的新手Javascript。我想要做的就是创建一个带有动态下拉列表的表单，获取选择的值并将它们放入数据库中。现在我处于创建动态下拉列表的第一阶段。这是代码的我的python部分。class Form(FlaskForm):    site = SelectField('Site', choices=[(' ', ' '), ('International', 'International'), ('Domestic', 'Domestic')])    location = SelectField('Location', choices=[])    city = SelectField('City', choices=[])    street = SelectField('Street', choices=[])    sub_street = SelectField('BuildingStreet', choices=[])    floor = SelectField('Floor', choices=[])    room = SelectField('Room', choices=[])    side = SelectField('Side', choices=[])@app.route('/')def basic():    return render_template('basic.html')@app.route('/Welcome', methods=['GET', 'POST'])def index():    form = Form()    location_choice_list = [(locations.id, locations.location) for locations in                            Hostname.query.filter_by(site='International').all()]    form.location.choices = remove_duplicates.unique_list(location_choice_list)    city_choice_list = [(cities.id, cities.city) for cities in Hostname.query.filter_by(site='International').all()]    form.city.choices = remove_duplicates.unique_list(city_choice_list)    street_choice_list = [(streets.id, streets.street) for streets in                          Hostname.query.filter_by(site='International').all()]    form.street.choices = remove_duplicates.unique_list(street_choice_list)    sub_street_choice_list = [(sub_streets.id, sub_streets.sub_street) for sub_streets in                              Hostname.query.filter_by(site='International').all()]    form.sub_street.choices = remove_duplicates.unique_list(sub_street_choice_list)所以首先我创建了一个类，其中包含用户可以从表单中选择的所有下拉列表。除了站点之外，所有其他选项最初都填充有对应于“国际”的选项。即“国际”对应的所有地点，“国际”对应的所有城市等等。我使用了一个小函数作为模块来删除数据库中无法避免的重复条目。最初，当显示表单时，一切都按预期进行。我没有放置 basic.html 文件，因为它只包含一个指向“/Welcome”的链接。此外，我用作模块的 remove_duplicates 函数也没有问题。

Answer 1

您的location变量与window.location使用当前文档 url- https://developer.mozilla.org/en-US/docs/Web/API/Window/location的变量冲突

var list = [{"id":" ","location":" "}, {"id":"CN0","location":"CN0"},{"id":"India","location":"India"},{"id":"Japan","location":"Japan"},{"id":"Honkong","location":"Honkong"},{"id":"GB0","location":"GB0"}];

const countries = document.querySelector('#countries');

let optionHTML = ""; 

list.forEach((obj) => {

    optionHTML += '<option value="' + obj.id + '">' + obj.location + '</option>';

});

countries.innerHTML = optionHTML;

countries.addEventListener('change', function() {

    location = this.value;

    // alert(location);

    alert(window.location === location);

});

<select name="" id="countries"></select>

而是使用不同的变量，而不是location使用block-scoped变量 usinglet或const未提升且不与全局变量冲突的变量。

var list = [{"id":" ","location":" "}, {"id":"CN0","location":"CN0"},{"id":"India","location":"India"},{"id":"Japan","location":"Japan"},{"id":"Honkong","location":"Honkong"},{"id":"GB0","location":"GB0"}];

const countries = document.querySelector('#countries');

let optionHTML = ""; 

list.forEach((obj) => {

    optionHTML += '<option value="' + obj.id + '">' + obj.location + '</option>';

});

countries.innerHTML = optionHTML;

countries.addEventListener('change', function() {

    let location = this.value;

    console.log(location);

});

<select name="" id="countries"></select>