如何创建动态下拉菜单

时间:2014-06-24 22:42:57

标签: javascript jquery html ajax

http://www.developphp.com/view.php?tid=1267

我不确定如何链接代码, 大家好,我是HTML和Javascript的新手。我正在尝试创建动态下拉菜单,如提供的网站所示。我下载了源代码并且它工作得很好但我的主要问题是如何从XML页面获取下拉选项而不是硬编码。我想创造一些类似国家 - 州 - 城镇的东西,所以如果我选择美国,它会选择只适用于美国等的选项。在上面的代码中,它拆分字符串,使值为第一个,标签为第二个。是否有人可以帮助我,我正在努力帮助我的哥哥。什么是完成这个,使用AJAX的某种方式,如果是这样,我可以只使用像上面的代码Javascript?谢谢

1 个答案:

答案 0 :(得分:0)

确实可以使用AJAX来获取数据,但是您必须稍微更改一下代码。你可以这样做:

http://jsfiddle.net/DerekL/BS7Lp/3/

//Assuming this is the object returned via AJAX
var ajaxResult = {
    Chevy: ["|", "camaro|Camaro", "corvette|Corvette", "impala|Impala"],
    Dodge: ["|", "avenger|Avenger", "challenger|Challenger", "charger|Charger"],
    Ford: ["|", "mustang|Mustang", "shelby|Shelby"],
    SomeMore: ["|", "more|More", "options|Options"]
};

function init() {
    document.getElementById("slct1").options.add(
        document.createElement("option")
    );
    for (var names in ajaxResult) {
        var option = document.createElement("option");
        option.value = names;
        option.innerHTML = names;
        document.getElementById("slct1").options.add(option);
    }
}

function populate(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    var optionArray = ajaxResult[s1.value];
    for (var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}

init();  //Call this when you have the object from AJAX