Question

我网站上的标题导航栏中有三个列表。它们包含一周中的日子，活动的指导者以及最终的活动本身。

当从列表中选择项目时，它会在屏幕上显示信息，我还希望在选择某些内容后将其他列表设置回原始位置。

这是我的索引中的代码，用于创建列表及其创建的内容：

<div data-role="page" id="group">

        <div data-role="header" data-position="fixed">
            <h1>Group Exercise</h1>
            <div data-role="navbar">
                <?php include('select_fill.php'); ?>
            </div>
        </div>

        <div id="txtHint">
            <?php include('today.php');?>
        </div>

</div>

文件select-fill.php从数据库中填充这些列表

echo '<ul>';

/*****************************************************
        Day of the week
******************************************************/
echo'
        <li><select name="days" id="days" onchange="showInfo(this.value)" data-native-menu="false">
            <option value="">       Day     </option>
            <option value="Monday|1">   Monday      </option>
            <option value="Tuesday|1">  Tuesday     </option>
            <option value="Wednesday|1">    Wednesday   </option>
            <option value="Thursday|1"> Thursday    </option>
            <option value="Friday|1">   Friday      </option>
            <option value="Saturday|1"> Saturday    </option>
            <option value="Sunday|1">   Sunday      </option>
        </select></li>
';
//connects to db ******************************************************************

$sql="SELECT DISTINCT Class FROM schedules ORDER BY Class ASC";

$result = mysqli_query($con,$sql);

echo'                   
        <li><select name="class" id="class" onchange="showInfo(this.value)" data-native-menu="false">
        <option value="">Class</option>';

while($row = mysqli_fetch_array($result))
{
    echo '<option value="Class|'.$row['Class'].'">'.$row['Class'].'</option>';
}

echo '</select></li>';
//same for the instructors.
echo '</ul>';

我正在使用的Javascript如下

function showInfo(str)
{

if (str=="")
{
    document.getElementById("txtHint").innerHTML="";
    return;
} 

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}

else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        $('#txtHint').html(xmlhttp.responseText).enhanceWithin();   
    }
}

xmlhttp.open("GET","information.php?q="+str,true);
xmlhttp.send();

});

}

现在我找到了这个jsfiddle示例并尝试过没有成功。我已经尝试将其作为index.php中的添加脚本并作为我的javascript文件的一部分。

http://jsfiddle.net/TmJCE/432/

我正在使用Jquery Mobile版本1.4.0

选择列表项后，将所有列表重置为默认值

0 个答案: