Skip to main content
 首页 » 编程设计

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

2025年05月04日25artech

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

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


哦,大家圣诞快乐!

“#圣诞节代码”

请您参考如下方法:

看来您正在使用 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'); 
        } 
    }); 
});