HTML下拉框绑定XML

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

     

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

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



一、具体实现



 


1XML文件


<<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>

2HTML

@* 页面加载时读取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>


3JS

<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所在的相对路径

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

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值