javascript - 混搭 : Select Box/Disabled Input/Getting Info From Database

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 是如何工作的，但我现在正在谷歌上搜索它以尝试弄清楚。

---

哦，大家圣诞快乐!

“#圣诞节代码”

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');
        }
    });
});