Question

我有一个select元素，其中有一个A-Z选项，该选项与另一个select数据选项链接，无法为每个数据选项调用xml类别，并在用户选择每个选项时隐藏其余的。假设如果用户选择数据选项“ Amazing Park”，则只有xml中Amazing Park的节点值为0或1，才应该是文本区域中的输出。

这是针对Apache Cordova 8.0，JavaScript版本8.0。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<meta name="http-equiv" content="Content-type: text/html;" charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="js/jquery-1.5.0.mobile.min.css">
<link rel="stylesheet" type="text/css" href="css/english.css">
</head>
<body>

<div>
<select class="letters" id="alpha" onchange="giveSelection(this.value)">    
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
      <option value="e">D</option>
      <option value="f">F</option>
</select>

    <select class="story" id="story" onchange="storyselected(this.value)">

      <option data-option="a">A blessed home</option>
      <option data-option="a">Amazing park</option>
      <option data-option="a">As they passed</option>
      <option data-option="b">Blessed times</option>
      <option data-option="b">Being humble</option>
</select>
</div>

    <div data-role="content" class="ui-content" role="main" placeholder="Filter by data-option">
    <div class="content-primary">
    <hr>

<div style="padding: 20px; background-color:White; border-color:Gray; border-style:solid; border-width:1px;border-radius:10px; font-family: Times New Roman; text-transform: none;" id="textarea" type="text" name="textarea">          

<p id="text"></p> // this is where i want the story to be shown

</body>
</html>

我的XML文件

将来我将CDATA用于多种语言。

<?xml version="1.0" encoding="UTF-8"?>
<storyDB>
    <story value = "a">
    <title>A blessed home</title>
        <text><![CDATA[A Blessed home<br> and the whole story]]></text>
// multiple language will go here
    </song>

    <story value ="a">
    <title>Amazing Park</title>
        <text><![CDATA[The story of amazing park...]]></text>
    </story>

   <story value ="b">
    <title>Blessed Time</title>
        <text><![CDATA[Blessed times...]]></text>
    </story>

</storyDB>

我的Java脚本

var text = document.getElementById('#text');
var alpha = document.querySelector('#alpha');
var stories = document.querySelector('#story');
var options2 = songs.querySelectorAll('option');

function giveSelection(alphaValue)
{
    story.innerHTML = '';
    for(var i = 0; i < options2.length; i++)
    {
        if(options2[i].dataset.option === alphaValue)
        {
            stories.appendChild(options2[i]);
        }
    }
}
giveSelection(alpha.value);

function storyselected()
{
    $.ajax({
        url: "english.xml",
        dataType: "xml",
        success: function(data)
        {
            $(data).find('story').each( function()
            {
                var info = $(this).find("text").text();
                $("#text").append(info);
            });
        }
    });
}

无法获得预期的输出

0 个答案: