处理select标签的值为option的text

本人在使用xpath在jsp页面中进行三级联动操作时,页面可以出现三级联动效果,但是select标签内的value是option的value也就是地区的号码。这使我在之后的对数据库的插入操作造成了很大影响!!!插入的都是数字,并不是地名的中文格式。经过多方查找和测验。解决了这一问题。下面是问题代码和解决方案。

使用语言:Java。 IDE:idea。 框架:springMVC
xml部分代码

<?xml version="1.0" encoding="utf-8"?>

    <area country="china">   
        <province id="1" value="110000" name="北京市">  
            <city value="110100" name="市辖区">       
                <piecearea value="110101" name="东城区"/>   
                <piecearea value="110102" name="西城区"/>
          	</city>
       </province>
    </area>

三级联动

    var xmlDoc = null;
    window.onload = init;
    function init() {
        initDoc();
        var pushP = document.getElementById("pushP");
        var pushC = document.getElementById("pushC");
        var pushD = document.getElementById("pushD");
        var oP = document.getElementById("province");
        oP.onchange = function() {
        
            intiX("city", "/area/province[@value='" + this.value + "']/city");
            document.getElementById("district").options.length = 1;

pushP.value = oP.options[oP.selectedIndex].text;//主要语句

        };
    
        var oC = document.getElementById("city");
    
        oC.onchange = function() {
            intiX("district", "//city[@value='" + this.value + "']/piecearea");

pushC.value = oC.options[oC.selectedIndex].text;//主要语句

        };
    
        var oD = document.getElementById("district");
    
        oD.onchange = function() {

pushD.value = oD.options[oD.selectedIndex].text;//主要语句

        }
    }
    
    function initDoc() {
    
        var xhr = create();
    
        xhr.open("GET", "resources/area1.xml", true);
    
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
    
                xmlDoc = xhr.responseXML;
    
                intiX("province", "/area/province");
            }
        };
        xhr.send();
    
    
    }
    
    
    function intiX(id, path) {
        var nodes = getNodes(path);
        insert(id, nodes);
    }
    
    function insert(id, nodes) {
        var content = document.getElementById(id);
        content.options.length = 1;
        for (var i = 0; i < nodes.length; i++) {
    
            var node = document.createElement("option");
            node.text = nodes[i].getAttribute("name");
            node.value = nodes[i].getAttribute("value");
            content.add(node);
        }
    }
    function getNodes(path) {
        var nodes = Array();
        var ljk = xmlDoc.evaluate(path, xmlDoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
    
        var n;
        while((n = ljk.iterateNext())) {
            nodes.push(n);
        }
        return nodes;
    }

function create() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        return new ActiveXObject("Mircosoft.XMLHTTP");
    } else {
        alert("no");
    }
}

jsp页面

          	<div>
                <h2 class="sj">收货地址:</h2>
                <input type="hidden" id="pushP" value="" name="province"/>
                <input type="hidden" id="pushC" value="" name="city"/>
                <input type="hidden" id="pushD" value="" name="district"/>

                <select  id="province">
                    <option value="">-请输入省份-</option>
                </select>
                <select  id="city">
                    <option value="">-请输入城市-</option>
                </select>
                <select  id="district">
                    <option value="">-请输入地区-</option>
                </select>
            </div>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/satomiyo/article/details/82817642
今日推荐