Question

我想创建一个通过ajax调用加载所有内容的页面，因此URL始终保持不变。首先，将向用户呈现一个具有一些选择的框。根据他所做出的选择，另一个人会根据他在第二个三分之一上做出的选择而出现。我已经使用ajax bit成功创建了这个逻辑，如下所示。如果代码有点混乱，我很抱歉，但是我从不同于我的代码的机器输入问题，所以请保持温和。如果您有任何问题，我会尽量提供尽可能多的信息。那么html

<!DOCTYPE html>
<html>
    <head etc....>
<body>
        <div class="main-nav">
        </div><!--some navigation things here not important-->
        <div class=controls>
            <div class="select-control1">
                <select>
                    <option selected="selected" value="">Choose one of the following</option>
                    <!-- adding the django code for this select-->
                    {% for option in options %}
                        <option value="{{option.id}}">{{option.name}}</option>
                    {%endfor%}
                </select> 
            </div>
            <div class="select-control2" style="display:none;">
                <select>
                    <option selected="selected" value="">Choose one of the following</option>                        
                </select> 
            </div>
        </div>
    </body>
<html>

每个control1中的option1和2都是由标签的django模板预先填充的（它是一个django项目）。

在每个控件的更改时触发ajax调用，从后面执行的视图发送json_objects数组

$(".select-control1 select").change(function (){
    option = $(this).prop("value");
    //Skipping the case where option value is "" for now
    $.ajax({
        url:'/url/to/view/',
        dataType:'json',
        type:'GET',
        success:onSuccess1
    });
});
function onSuccess1(data, status, jqXHR){
    $.each(data, function(index, value){
        html = "<option value="+value['id']+">"+value['option']+"</option>";
        $(".select-control2 select").append(html);
    });
    $(".select-control2").show();
}

正如我所说，对错误检查不感兴趣，或者如果用户在select-control1中检查了不同的选项会发生什么。我确实删除了它们并将新获得的那些放在ajax调用中，就在现在这样做不对。我的问题是2 + 1.首先，当ajax调用后第二个控件填充了选项时，“选择以下选项之一”选项会消失。这是附加的自然行为吗？还有另一种方式吗？

第二，即使我在页面加载时在“选择一个....”选项的第一个控件中有所选属性，但它不会显示为已选中，但它会提供其中一个选项从django装载，例如选项1

第三个也是最后一个：我对ajax和javascript一般都很新，而且这种编程。我熟悉程序语言，可以按我的意愿组织它们。但是Javascript让我很难过。现在我有一个veeery大js文件，它将包括页面上所有元素的所有ajax和jquery调用。有没有办法以某种方式“模块化”它，以某种方式将它分隔在不同的文件中？任何好的链接页面书籍可以给我一个指导？

提前致谢!!

Answer 1

这是因为"<option value="+value['id']+>"。你错过了"

应该是

"<option value="+value['id']+">"+

或者只是尝试

$(".select-control2").append(new Option(value['option'], value['id']));

如果您的浏览器是IE8，则上述代码将无效。在这种情况下，你必须使用这样的东西，

var opt = new Option(value['option'], value['id']));
$(opt).html(value['option']);
$(".select-control2").append(opt);

使用ajax和组织javascript文件将值添加到选择框

1 个答案: