混搭：选择框/禁用输入/从数据库获取信息

Question

我正在创建一个表单，人们可以在其中选择一个新团队，然后输入其位置，或者如果他们从列表中选择一个团队，我希望禁用输入 - 并在其中给出所选团队的位置输入框。到目前为止，这是我的代码。它不起作用。 :(

<select id="chooseTeam" name="chooseTeam" data-placeholder="Select Team">
    <option></option>
    {% for team in teams %}
    <option>{{team.name}}</option>
    {% endfor %}
    <option>New Team</option>
</select>

<input type="text" id="input_location" name="input_location"/>

在单独的 JS 文件中：

$(document).ready(function() {
    $('#chooseTeam').on('blur', function() {
        if (form.chooseTeam.value != "New Team" && form.chooseTeam.value != "Select Team") {
            $("#input_location").html("{{team.location}}");
            document.getElementById("input_location").disabled = true;
        }
    });
});

---

迷你更新

显然，为此需要 AJAX。我是 Javascript 的新手（3 天前），所以我还不知道 AJAX 是如何工作的，但我现在正在谷歌上搜索它以试图弄清楚。

---

哦，祝大家圣诞快乐！

“#code-on-christmas”

Answer 1

看来您正在使用 Django 和 jQuery。真的吗？目前我不能给你一个完整的答案，但是下一行中的代码不能工作，因为你正在混合客户端和服务器端代码。

$("#input_location").html("{{team.location}}");

表达式 {{team.location}} 不能被 Django 求值，因为它只存在于浏览器的客户端。如果您希望 Django 评估在客户端选择的内容，您应该使用 $.ajax() 在服务器和客户端之间使用 AJAX 调用。

另外，为什么不对所有代码使用 jQuery 选择器呢？做这样的事情：

$(document).ready(function() {
    $('#chooseTeam').on('blur', function() {
        var currentTeam = $(this).val();
        if (!$.inArray(currentTeam, ['New Team', 'Select Team'])) {
            $("#input_location").attr('disabled', 'disabled');
        }
    });
});