js读取xml文件并引用到下拉选择选项

最新推荐文章于 2020-04-21 13:56:30 发布

原创最新推荐文章于 2020-04-21 13:56:30 发布 · 909 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#XML #JS

表单经常用到下拉框，除了在option标签写死，从数据库动态载入，这里将选项写到xml文件内，并在js中读取到页面上。

首先xml文件随便来几个选项：

<sels>
    <!--支出类别-->
    <zclb>食品</zclb>
    <zclb>衣着</zclb>
    <zclb>居住</zclb>
    <zclb>家庭设备用品及服务</zclb>
    <zclb>医疗保健</zclb>
    <zclb>教育文化娱乐服务</zclb>
    <zclb>交通和通讯</zclb>
    <zclb>人情礼金</zclb>
    <zclb>其它商品和服务</zclb>
</sels>

页面select标签：

 <select class="form-control" id="XXX" name="XXX">
</select>

js片段，引用：https://www.cnblogs.com/luoyunfei99/articles/6705895.html的方法

//xml 载入下拉选项 go
    //主要参考 https://www.cnblogs.com/luoyunfei99/articles/6705895.html
    //参考 https://blog.youkuaiyun.com/github_36885144/article/details/53489218
    // 加载xml文档
    var loadXML = function (xmlFile) {
        var xmlDoc;
        if (window.ActiveXObject) {
            xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏览器
            xmlDoc.async = false;
            xmlDoc.load(xmlFile);
        }
        else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐浏览器
            //else if (document.implementation && document.implementation.createDocument) {//这里主要是对谷歌浏览器进行处理
            xmlDoc = document.implementation.createDocument('', '', null);
            xmlDoc.load(xmlFile);
        }
        else{ //谷歌浏览器
            var xmlhttp = new window.XMLHttpRequest();
            xmlhttp.open("GET",xmlFile,false);
            xmlhttp.send(null);
            if(xmlhttp.readyState == 4){
                xmlDoc = xmlhttp.responseXML.documentElement;
            }
        }
        return xmlDoc;
    }

    // 首先对xml对象进行判断
    var  checkXMLDocObj = function (xmlFile) {
        var xmlDoc = loadXML(xmlFile);
        if (xmlDoc == null) {
            alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
            window.location.href = '../err.html';
        }
        return xmlDoc;
    }
    var xmlDoc = checkXMLDocObj('../xmls/sels.xml');//读取xml文件中的数据
    var a = xmlDoc.getElementsByTagName("zclb");//获取标签
    $('#XXX').append('<option value="">' + "选择支出类别" + '</option>');
    for(var i=0;i<a.length;i++){
        console.log(a[i].innerHTML);
        $('#XXX').append('<option value='+a[i].innerHTML+'>' + a[i].innerHTML + '</option>');
    }
    //xml 载入下拉选项 end