HTML下拉框绑定XML

最新推荐文章于 2022-06-13 11:27:07 发布

原创最新推荐文章于 2022-06-13 11:27:07 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

【基础沉淀】专栏收录该内容

15 篇文章

订阅专栏

传统的HTML下拉框数据通常是硬编码在控件内，但这种方法不够灵活。当需求变化时，需要更新数据并重新发布程序。本文探讨了三种下拉框数据存储方式：XML文件、HTML和JS，并提供了使用XML文件进行数据绑定的简单实现，通过请求XML文件动态加载下拉框数据，提高了系统的灵活性。

一直以来界面上下拉框中的数据，一般都是写在控件内。但这样及其不灵活，需求改变了，下拉框需要追加一些数据，那我们必须重新修改我们控件中的数据，再将程序打包发布。不仅浪费人力、物力，而且及其不安全。

下拉框数据存储的现在使用的3种形式：

一、具体实现

1、XML文件

<<span style="font-size:18px;">?xmlversion="1.0" encoding="UTF-8"?>
<Options>
<option>考试系统</option>
<option>基础系统</option>
<option>权限系统</option>
<option>评教系统</option>
  <option>新生系统</option>
  <role>超管理员</role>
  <role>管理员</role>
  <role>操作员</role>
</Options>
 </span>

2、HTML

@* 页面加载时读取xml文件 *@
<bodyonload="GetDataFromXML();">
          <div>
            <table width="689"border="0" cellpadding="2" cellspacing="10"bordercolor="#FFFFFF">
            <tr>
                <tdwidth="173" height="21">用户名</td>
                <tdwidth="168">手机号</td>
                <tdwidth="149">组织</td>
                <tdwidth="163">角色</td>
            </tr>
            <tr>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="UserOne" type="text" id="txtUserOne">
                    </form>
                </td>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="PhoneOne" type="text" id="txtUserOne5">
                    </form>
                </td>
 
                <td>
                    <divclass="result">
                        <selectclass="easyui-combobox" name="select"onchange="SelectChanage();" style="width:150px">
                           <option>==请选择组织==</option>
                        </select>
                    </div>
 
                </td>
                <td>
                    <divclass="role">
                        <selectclass="easyui-combobox" name="SelectRole"  style="width:150px"onchange="SelectChanage();" >
                           <option>==请选择角色==</option>
                    </div>
                </td>
 
            </tr>
 
            <tr>
                <td>
                    <inputname="UserTwo" type="text"id="txtUserTwo"></td>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="PhoneTwo" type="text" id="txtUserOne6">
                    </form>
                </td>
 <span style="font-size:18px;">
                <td>
                    <divclass="result">
                        <selectclass="easyui-combobox" name="select"  onchange="SelectChanage();"style="width:150px">
                           <option>==请选择组织==</option>
                        </select>
                    </div>
                </td>
 
                <td>
                    <divclass="role">
                        <selectclass="easyui-combobox" name="SelectRole"  style="width:150px"onchange="SelectChanage();" >
                           <option>==请选择角色==</option>
                    </div>
                </td>
            </tr>
 
            <tr>
                <td>
                    <inputname="txtUserThree" type="text"id="txtUserThree"></td>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="txtPhoneThree" type="text"id="txtUserOne7">
                    </form>
                </td>
                <td>
                    <divclass="result">
                        <selectclass="easyui-combobox" name="select"  onchange="SelectChanage();"style="width:150px">
                           <option>==请选择组织==</option>
                        </select>
                    </div>
                </td>
 
                <td>
                    <divclass="role">
                        <selectclass="easyui-combobox" name="SelectRole"  style="width:150px"onchange="SelectChanage();" >
                           <option>==请选择角色==</option>
                    </div>
                </td>
            </tr>
 
            <tr>
                <td>
                    <inputname="txtUserFour" type="text"id="txtUserFour"></td>
                <td>
                    <formname="form4" method="post" action="">
                        <inputname="txtPhoneFour" type="text"id="txtUserOne8">
                    </form>
                </td>
 
                <td>
                    <divclass="result">
                        <selectclass="easyui-combobox" name="select"  onchange="SelectChanage();"style="width:150px">
                           <option>==请选择组织==</option>
                        </select>
                    </div>
                </td>
 
                <td>
                    <divclass="role">
                        <selectclass="easyui-combobox" name="SelectRole"  style="width:150px"onchange="SelectChanage();" >
                           <option>==请选择角色==</option>
                    </div>
                </td>
            </tr>
 
            <tr>
                <td colspan="4"style="height:70px">
                    <divalign="right">
                       <input type="button" name="btnSkip"  id="btnSkip" value="跳过">
                       <input type="button" name="btnNext"  id="btnNext" value="下一步" onclick="SelectFunction()">
                    </div>
                </td>
            </tr>
        </table>
        </div>
</div>
</body>
</html></span>

3、JS

<script>
 
        //创建XMLHttpRequest对象
        function CreateRequest() {
            //火狐、谷歌……
            if (window.XMLHttpRequest)
                return new XMLHttpRequest();
            else if (window.ActiveXObject)
            //ie6需要创建ActiveObject对reponseXML对象进行加载后对getElementByTagName进行解析
                return newActiveXObject("Microsoft.XMLHTTP");
            else
                return false;
        }
 
        //页面加载时触发
        function GetDataFromXML() {
 
            //创建XMLHttpRequest对象
            var request = CreateRequest();
            if (!request)
                return;
 
            //打开外部的XML文件
            request.open("GET","../../Common/binddata.xml");
            //注册回调函数,实际上在每次XMLHttpRequest对象的readyState属性的值发生变化的时候都会被调用，但是我们实际上只关心
            request.onreadystatechange =function () {
                if (request.readyState == 4){                  
                    if (request.status == 200){
                        var xmlDoc;
 
                        //IE6
                        if(window.ActiveXObject) {
                            xmlDoc = newActiveXObject("Microsoft.XMLDOM");
                            xmlDoc.async =false;
                           xmlDoc.load(request.responseXML);//不可以是responseText
                        }
                        //Firefox
                        else {
                            xmlDoc =request.responseXML;
                        }
                       
                        //读取XML组织节点数据
                        options =xmlDoc.getElementsByTagName("option");
                        //读取XML角色节点数据
                        roles =xmlDoc.getElementsByTagName("role");
 
                        //将XML中的组织数据赋给下拉框
                        ListOptions();
 
                        //将XML中的角色数据赋给下拉框
                        ListRoles();
                    }
                }
            }
 
            //向服务器发送数据，但不带有数据，一般用get方式提交
            request.send(null);
        }
 
        //为组织添加选项
        function ListOptions() {
            //获得html中关于组织的下拉框
            var select =document.getElementsByName("select");
 
            //j表示下拉框的选项，i标识XML中的数据
            //options.length代表的是XML中数据的个数
            //select[j].options[i + 1] 其中的options是下拉框select的属性，表示其中的选项
            //newOption(options[i].firstChild.data);  Option为XML的属性
            //firstChild为被选节点的第一个子节点
            for (var j= 0; j <select.length;j++){
                for (var i = 0; i <options.length; i++) {
                    select[j].options[i + 1] =new Option(options[i].firstChild.data);
                }
            }
 
        }
 
        //为角色下拉框添加数据
        function ListRoles() {
            var selectRole =document.getElementsByName("SelectRole");
            for (var j = 0; j <selectRole.length; j++) {
                for (var i = 0; i <roles.length; i++) {
                    selectRole[j].options[i+1]= new Option(roles[i].firstChild.data);
                }
            }
        }
    </script>

注意：request.open("GET", "../../Common/binddata.xml"); 写XML所在的相对路径

以上实例只是简单的实现，实现过后发现简单的几段代码就解决了我们长期以来将数据写死在程序中的问题。为了系统更加灵活，先把一些基本的数据写灵活。