Django和Javascript：渲染HTML表单值

Question

我在尝试渲染一个包含相互依赖的选择字段的表单时遇到了不一致的问题。举个例子，我有三个对象：'联赛'、'球队'和'赛事'。球队是联赛的成员，而赛事则是指两支球队之间的对决。

我写了JavaScript来处理用户选择的联赛和球队，但它的表现不太稳定。例如，我的Django代码生成了这样的HTML输出用于联赛：

<p><label for="challengeLeague">League:</label> <select id="challengeLeague"               name="challengeLeague" onChange="getTeam()">
    <option value="" selected="selected">---------</option>
    <option value="1">NBA</option>
    <option value="2">NFL</option>
    ...
</select></p>

而这是用于球队的：

<p><label for="challengeTeam">Team:</label> <select id="challengeTeam" name="challengeTeam" onChange="getEvent()">
    <option value="" selected="selected">---------</option>
    <option value="1436">Arizona Cardinals</option>
    <option value="123">Atlanta Hawks</option>
    <option value="1810">Atlanta Falcons</option>
    ...
    </select></p>

然而，当我尝试在JavaScript中访问这些值以请求更多信息时，联赛的部分可以正常工作，但球队的部分却不行。例如：

document.getElementById("challengeLeague").value;

对于NBA，它返回“1”，这很正常，但

document.getElementById("challengeTeam").value;

却没有返回一个数字，而是返回了“亚利桑那红雀队”，而不是1436。

另外，当我在JavaScript控制台中输入获取球队ID的函数时，它返回了一个像这样的列表：

<select id="challengeTeam" name="challengeTeam" onChange="getEvent()">
    <option value="Arizona Cardinals">Arizona Cardinals</option>

把数字值替换成了名字字符串。我对Python有一定经验，正在学习Django，但JavaScript还是个新手。所以我通常是反向调试，但到目前为止没有成功。

你知道可能出什么问题吗？

编辑：

为了提供更多信息，联赛和球队的表单字段都是在Python中生成的，如下所示：

self.fields['challengeLeague'] = forms.ModelChoiceField(queryset=League.objects.all(), widget=forms.Select(attrs={"onChange":'getTeam()'}))

其中getTeam和getEvent是这样的JavaScript函数：

function getTeam() {
    var leagueName = document.getElementById("challengeLeague").value;
    var url = "http://127.0.0.1:8000/games?league_name=" + escape(leagueName);
    request.open("GET", url, true);
    request.onreadystatechange = updateTeams;
    request.send(null);
} 

function getEvent() {
    var teamName = document.getElementById("challengeTeam").value;
    var url = "http://127.0.0.1:8000/gamemp?team_name=" + escape(teamName);
    request.open("GET", url, true);
    request.onreadystatechange = updateEvents;
    request.send(null);
} 

只有getEvent()中的变量赋值是错误的。getTeam正确返回了数字值。

这两个函数的更新功能是相同的：

function updateTeams() { 
    if (request.readyState == 4) {
        if (request.status == 200) {
            var data = JSON.parse(request.responseText); 
            update_select($('select[name=challengeTeam]'), data);
        }  
        else if (request.status == 404) {
            alert("404 error");
        }
        else {
        alert("Error: " + request.status);
        }
    }
}   

Answer 1

正如Mahmud所指出的，我在用我的update_select函数编辑javascript中的值：

function updateTeams() { 
    if (request.readyState == 4) {
        if (request.status == 200) {
            var data = JSON.parse(request.responseText); 
            update_select($('select[name=challengeTeam]'), data);
        }  
        else if (request.status == 404) {
            alert("404 error");
        }
        else {
        alert("Error: " + request.status);
        }
    }
}

function update_select(select, data) {
    select.find('option').remove();
    for (var k in data) {
        select.append($('<option value="'+data[k]+'">'+data[k]+'</option>'));
    }
}

这段代码把新元素的值和文本都设置成了球队名称的字符串。其实我真正想要的是把值属性设置为这个数据的键。这样做解决了我的问题：

function update_select(select, data) {
    select.find('option').remove();
    for (var k in data) {
        select.append($('<option value="'+ k +'">'+ data[k] +'</option>'));
    }
}