Форум

leon2009sp · #1 (**permalink**) 22.02.2016, 10:13

Здравствуйте! можно простой примерчик чтение файла xml;

Код:

<?xml version="1.0" encoding="utf-8"?>
<category>
    <book name="kat1">
        <page name="111.php">data1</page>
        <page name="222.php">data2</page>
        <page name="333.php">data3</page>
        <page name="444.php">data4</page>
    </book>
    <book name="kat2">
        <page name="111.php">data5</page>
        <page name="222.php">data6</page>
        <page name="333.php">data7</page>
        <page name="444.php">data8</page>
    </book>
</category>

чтобы можно было бы запихнуть в select box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml " lang="en" xml:lang="en">
<head>
  <title>dinamic select</title>
  <meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
  <meta http-equiv="Content-Language" content="ru-ru" />
<style type="text/css">
* { margin: 0; padding: 0; }
#main { position: relative; left: 100px; top: 100px; }
</style>
<script type="text/javascript"><!--
var mv = new Array();
mv[0] = Array('выберите город');
mv[1] = Array('111','Белорусский','Казанский','Киевский','Курский','Октябрьский','Павелецкий','Рижский','Савеловский','Ярославский');
mv[2] = Array('222','Балтийский','Варшавский','Витебский','Ладожский','Московский','Финляндский');
function changetown() {
    var val1 = parseInt(document.forms[0].city.value); 
    mva = mv[val1];
    recity(); }
function recity() {
    var sselect = document.forms[0].vokzal;
    for(i = sselect.length; i > 0; i--) { sselect.options[i] = null; } 
    opt = new Array; 
    for(i = 0; i < mva.length; i++) { sselect.options[i] = new Option(mva[i], (i)); }}
//-->
</script>
</head>
<body><div id="main">
<form>
<select name="city" onchange="changetown();">
<option value="0"></option>
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
</select>
<select name="vokzal"><option>выберите город</option></select>
</form>
</div>
</body></html>

destus · #2 (**permalink**) 22.02.2016, 11:14

Сообщение от leon2009sp

Здравствуйте! можно простой примерчик чтение файла xml;

Код:

<?xml version="1.0" encoding="utf-8"?>
<category>
    <book name="kat1">
        <page name="111.php">data1</page>
        <page name="222.php">data2</page>
        <page name="333.php">data3</page>
        <page name="444.php">data4</page>
    </book>
    <book name="kat2">
        <page name="111.php">data5</page>
        <page name="222.php">data6</page>
        <page name="333.php">data7</page>
        <page name="444.php">data8</page>
    </book>
</category>

xPath, XSLT ну или просто навигация по DOM.

<?xml version="1.0" encoding="utf-8"?>
<category>
    <book name="kat1">
        <page name="111.php">data1</page>
        <page name="222.php">data2</page>
        <page name="333.php">data3</page>
        <page name="444.php">data4</page>
    </book>
    <book name="kat2">
        <page name="111.php">data5</page>
        <page name="222.php">data6</page>
        <page name="333.php">data7</page>
        <page name="444.php">data8</page>
    </book>
</category>

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    version="2.0">
    <xsl:template match="/">
        <html>
            <body>
                <xsl:for-each select="category/book">
                        <ul>
                          <xsl:value-of select="@name"/>
                          <xsl:for-each select="page">
                              <li>
                                <xsl:value-of select="." />
                              </li>
                          </xsl:for-each>
                        </ul>
                </xsl:for-each> 
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
    li{
        padding-left : 20px;
        list-style-type : none;
    }
</style>
<script>
    function loadXMLDoc(filename) {
        if (window.ActiveXObject) {
            xhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        else {
            xhttp = new XMLHttpRequest();
        }
        xhttp.open("GET", filename, false);
        try { xhttp.responseType = "msxml-document" } catch (err) { } // Helping IE11
        xhttp.send("");
        return xhttp.responseXML;
    }
    function displayResult() {
        xml = loadXMLDoc("testXML.xml");
        xsl = loadXMLDoc("testXSL.xsl");
        // code for IE
        if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
            ex = xml.transformNode(xsl);
            document.getElementById("example").innerHTML = ex;
        }
        // code for Chrome, Firefox, Opera
        else if (document.implementation && document.implementation.createDocument) {
            xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xsl);
            resultDocument = xsltProcessor.transformToFragment(xml, document);
            document.getElementById("example").appendChild(resultDocument);
        }
    }
</script>
</head>
<body onload="displayResult()">
    <div id="example" />
</body>
</html>

leon2009sp · #3 (**permalink**) 23.02.2016, 12:28

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    version="2.0">
    <xsl:template match="/">	
        <html>
            <body><select><option>
                <xsl:for-each select="category/book">
                        <ul>
                          <xsl:value-of select="@name"/>
                          <xsl:for-each select="page">
                              <li>
                                <xsl:value-of select="." />				
				 </li>
                          </xsl:for-each>
                      </ul>
                </xsl:for-each> 
           </option>  </select> </body>
        </html>		
    </xsl:template>
</xsl:stylesheet>

я же правильно делаю? все изменение в xls файле?

destus · #4 (**permalink**) 23.02.2016, 12:38

leon2009sp,
Смотря что именно вы хотите сделать. Я использовал неупорядоченный список просто для примера. Если надо в select засунуть все данные из тэгов <page> то надо так

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    version="2.0">
    <xsl:template match="/">	
        <html>
            <body><select>
                <xsl:for-each select="category/book/page">
                        <option>
                            <xsl:value-of select="." />	
						</option>	
                 </xsl:for-each>
            </select></body>
        </html>		
    </xsl:template>
</xsl:stylesheet>

Ещё больше инфы тут http://htmlweb.ru/xml/xslt1.php

leon2009sp · #5 (**permalink**) 23.02.2016, 15:55

пример в select1 висит book, а в select2 при выборе значение data1 появляются book2->page
а если выбрать data2 то в select2 появится book3 и

Код:

<?xml version="1.0" encoding="utf-8"?>
<category>
    <book name="---kat1---">
        <page name="111.php" value=1>data1</page>
        <page name="222.php" value=2>data2</page>
        <page name="333.php" value=3>data3</page>
        <page name="444.php" value=4>data4</page>
    </book>
    <book2 name="kat2">
        <page2 name="111.php" value=5>data5</page>
        <page2 name="222.php" value=6>data6</page>
        <page2 name="333.php" value=7>data7</page>
        <page2 name="444.php" value=8>data8</page>
    </book2>
    <book3 name="kat3">
        <page3 name="111.php" value=9>data9</page>
        <page3 name="222.php" value=10>data10</page>
        <page3 name="333.php" value=11>data11</page>
        <page3 name="444.php" value=12>data12</page>
    </book3>
</category>

и передача value

Код:

<xsl:value-of select="@value"/>

???
спасибо!

destus · #6 (**permalink**) 23.02.2016, 16:23

leon2009sp,
лучше на HTML показать, что именно хочется. Да и в xml если есть открывающий тэг, то обязательно должен быть закрывающий. Такие записи

<page2 name="111.php" value=5>data5</page>

неправильны.

leon2009sp · #7 (**permalink**) 24.02.2016, 05:31

попробую объяснить

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml " lang="en" xml:lang="en">
<head>
  <title>dinamic select</title>
  <meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
  <meta http-equiv="Content-Language" content="ru-ru" />
<style type="text/css">
* { margin: 0; padding: 0; }
#main { position: relative; left: 100px; top: 100px; }
</style>
<script type="text/javascript"><!--
var mv = new Array();
mv[0] = Array('выберите город');
mv[1] = Array('111','Белорусский','Казанский','Киевский','Курский','Октябрьский','Павелецкий','Рижский','Савеловский','Ярославский');
mv[2] = Array('222','Балтийский','Варшавский','Витебский','Ладожский','Московский','Финляндский');
function changetown() {
    var val1 = parseInt(document.forms[0].city.value); 
    mva = mv[val1];
    recity(); }
function recity() {
    var sselect = document.forms[0].vokzal;
    for(i = sselect.length; i > 0; i--) { sselect.options[i] = null; } 
    opt = new Array; 
    for(i = 0; i < mva.length; i++) { sselect.options[i] = new Option(mva[i], (i)); }}
//-->
</script>
</head>
<body><div id="main">
<form>
<select name="city" onchange="changetown();">
<option value="0"></option>
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
</select>
<select name="vokzal"><option>выберите город</option></select>
</form>
</div>
</body></html>

только данные нужно брать из xml

Код:

mv[0] = Array('выберите город');
mv[1] = Array('111','Белорусский','Казанский','Киевский','Курский','Октябрьский','Павелецкий','Рижский','Савеловский','Ярославский');
mv[2] = Array('222','Балтийский','Варшавский','Витебский','Ладожский','Московский','Финляндский');

leon2009sp · #8 (**permalink**) 24.02.2016, 05:35

<?xml version="1.0" encoding="utf-8"?>
<category>
    <book name="kat2">
<page2 name="111.php" value=1>data1</page2>
<page2 name="111.php" value=2>data2</page2>
    </book>
</category>
?>

такая запись правельна? закрытие xml ?>

destus · #9 (**permalink**) 24.02.2016, 09:45

leon2009sp,
Если нужна динамика, то тогда надо использовать навигацию по DOM дереву.

testXML.xml

<?xml version="1.0" encoding="utf-8"?>
<category>
    <city name="Москва">
		<station>Белорусский</station>
		<station>Казанский</station>
		<station>Киевский</station>
		<station>Курский</station>
		<station>Октябрьский</station>
		<station>Павелецкий</station>
		<station>Рижский</station>
		<station>Савеловский</station>
		<station>Ярославский</station>
	</city>
	<city name="Санкт-Петербург">
		<station>Балтийский</station>
		<station>Варшавский</station>
		<station>Витебский</station>
		<station>Ладожский</station>
		<station>Московский</station>
		<station>Финляндский</station>
	</city>
</category>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
    #station{
        margin-left : 150px;
    }
</style>
<script>
    function loadXMLDoc(filename) {
        if (window.ActiveXObject) {
            xhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        else {
            xhttp = new XMLHttpRequest();
        }
        xhttp.open("GET", filename, false);
        try { xhttp.responseType = "msxml-document" } catch (err) { } // Helping IE11
        xhttp.send(null);
        return xhttp.responseXML;
    }
    document.addEventListener('DOMContentLoaded', function () {
        var xml = loadXMLDoc("testXML.xml"),
            selCity = document.querySelector('#city'),
            selStation = document.querySelector('#station'),
            i;
        [].forEach.call(xml.querySelectorAll('city'), function (el) {
            selCity.add(new Option(el.getAttribute('name'), el.getAttribute('name')))
        })
        selCity.addEventListener('change', function () {
            selStation.options.length = 0 , i=0;
            [].forEach.call(xml.querySelectorAll('city[name=' + this.value + '] > station'), function (el) {
                selStation.add(new Option(el.textContent, ++i));
            })
        })
    })
</script>
</head>
<body>
    <select id="city"><option selected>Выберите город</option></select>
    <select id="station"></select>
</body>
</html>

http://pixs.ru/showimage/showpng_8266993_20819220.png

leon2009sp · #10 (**permalink**) 05.03.2016, 11:02

а почему не сработало с с дивом?

<body>
    <select id="city"><option selected>Выберите город</option></select>
    <div id="station"></div>
</body>

с инпутом тоже не выводит

Форум

Справочник

Discord чат

Курсы javascript