php - JQuery Mobile 中的 JavaScript 文件在其他页面上不起作用

Question

我有一个 JS 文件，其中列出了国家和这些国家/地区的州/地区。我有 1 个具有 3 个表单的 jquery 移动页面，并且我已将代码放入标题中以包含 js 文件。当我到达每个锚点时，第一个表格将有国家供我选择，但其他 2 个表格没有。发生了什么？

<?php
//allow sessions to be passed so we can see if the user is logged in
$sessionid = $_COOKIE["sessionid"];
session_id($sessionid);
session_start();

$expire=time()+60*60*24*30;
setcookie("sessionid", "$sessionid", $expire);

ob_start();

//connect to the database so we can check, edit, or insert data to our users table
$con = mysql_connect(***db info***) or die(mysql_error());
$db = mysql_select_db(***dbinfo***, $con) or die(mysql_error());

//include out functions file giving us access to the protect() function made earlier
include "./functions.php";

$userid = $_SESSION['uid'];
$lookupusername = mysql_query("SELECT * FROM users WHERE ID='$userid'");
$row = mysql_fetch_assoc($lookupusername);
$username = $row['username'];
$usercountry = $row['country'];

if ($username == ""){
header('Location: index.php');
}

?>

<!DOCTYPE html> 
<html>
<head>
<script type= "text/javascript" src = "countries.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>15:11 Project Mobile</title>

<link rel="stylesheet" href="css/jquery.mobile-1.3.0.css" />
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
</head> 
<body> 





<!-- BEGIN PAGE 2 -->

<div data-role="page" id="submit">
    <div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
        <ul data-role="controlgroup">
            <li><a href="#submit" data-role="button">Page Two</a></li>
                    <li><a href="#browse" data-role="button">Page Three</a></li>
            <li><a href="#projects" data-role="button">Page Four</a></li>
            <li><a href="log_out.php" data-role="button">Logout</a></li>
        </ul>
    </div>

    <div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
        <a href="#settingspanel" data-role="button" data-iconpos="notext" class="icon-reorder icon-2x" style="background: none; margin-left: 20px;"></a>
        <center><img src="images/logo_app_white.png" width="30px"></center>
    </div>
    <div data-role="content">   


<tr><td>Country: </td><td><select onchange="print_state('state',this.selectedIndex);" id="country" name = "country"></select></td></tr>

<tr><td>District/State: </td><td><select name ="state" id = "state"></select><script language="javascript">print_country("country");</script></td></tr>

<tr><td><font color="red">*</font>City: </td><td><input type="text" name="city" /></td></tr>


    </div>
    <div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
        <div data-role="navbar" style="background: #ce8339;">
            <ul>
                <li><a href="#feed" class="icon-tasks icon-2x">My Feed</a></li>
                <li><a href="#submit"class="icon-upload icon-2x">Submit</a></li>
                <li><a href="#browse" class="icon-search icon-2x">Browse</a></li>
                        <li><a href="#projects" class="icon-folder-open-alt icon-2x">Projects</a></li>
            </ul>
        </div><!-- /navbar -->  
    </div>
</div>

<!-- END PAGE 2 -->
















<!-- BEGIN PAGE org -->

<div data-role="page" id="submitorg">
    <div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
        <ul data-role="controlgroup">
            <li><a href="#submit" data-role="button">Page Two</a></li>
                    <li><a href="#browse" data-role="button">Page Three</a></li>
            <li><a href="#projects" data-role="button">Page Four</a></li>
            <li><a href="log_out.php" data-role="button">Logout</a></li>
        </ul>
    </div>

    <div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
        <a href="#settingspanel" data-role="button" data-iconpos="notext" class="icon-reorder icon-2x" style="background: none; margin-left: 20px;"></a>
        <center><img src="images/logo_app_white.png" width="30px"></center>
    </div>
    <div data-role="content">



<tr><td>Country: </td><td><select onchange="print_state('state',this.selectedIndex);" id="country" name = "country"></select></td></tr>
<tr><td>District/State: </td><td><select name ="state" id = "state"></select><script language="javascript">print_country("country");</script></td></tr>

<tr><td><font color="red">*</font>City: </td><td><input type="text" name="city" /></td></tr>




    </div>
    <div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
        <div data-role="navbar" style="background: #ce8339;">
            <ul>
                <li><a href="#feed" class="icon-tasks icon-2x">My Feed</a></li>
                <li><a href="#submit"class="icon-upload icon-2x">Submit</a></li>
                <li><a href="#browse" class="icon-search icon-2x">Browse</a></li>
                        <li><a href="#projects" class="icon-folder-open-alt icon-2x">Projects</a></li>
            </ul>
        </div><!-- /navbar -->  
    </div>
</div>

<!-- END PAGE org -->








<!-- BEGIN PAGE miss -->

<div data-role="page" id="submitmiss">
    <div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
        <ul data-role="controlgroup">
            <li><a href="#submit" data-role="button">Page Two</a></li>
                    <li><a href="#browse" data-role="button">Page Three</a></li>
            <li><a href="#projects" data-role="button">Page Four</a></li>
            <li><a href="log_out.php" data-role="button">Logout</a></li>
        </ul>
    </div>

    <div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
        <a href="#settingspanel" data-role="button" data-iconpos="notext" class="icon-reorder icon-2x" style="background: none; margin-left: 20px;"></a>
        <center><img src="images/logo_app_white.png" width="30px"></center>
    </div>
    <div data-role="content">


<tr><td>Country: </td><td><select onchange="print_state('state',this.selectedIndex);" id="country" name = "country"></select></td></tr>
<tr><td>District/State: </td><td><select name ="state" id = "state"></select><script language="javascript">print_country("country");</script></td></tr>

<tr><td><font color="red">*</font>City: </td><td><input type="text" name="city" /></td></tr>



    </div>
    <div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
        <div data-role="navbar" style="background: #ce8339;">
            <ul>
                <li><a href="#feed" class="icon-tasks icon-2x">My Feed</a></li>
                <li><a href="#submit"class="icon-upload icon-2x">Submit</a></li>
                <li><a href="#browse" class="icon-search icon-2x">Browse</a></li>
                        <li><a href="#projects" class="icon-folder-open-alt icon-2x">Projects</a></li>
            </ul>
        </div><!-- /navbar -->  
    </div>
</div>

<!-- END PAGE miss -->




</body>
</html>

国家.js

这篇文章太长了，但这里有一个下载 .js 的链接，并显示了用于使其工作的代码。它再次适用于第一种形式，但不适用于其他 3。

http://bdhacker.wordpress.com/2009/11/21/adding-dropdown-country-state-list-dynamically-into-your-html-form-by-javascript/

score 3 · Accepted Answer

您的问题是您在同一页面上多次使用相同的id属性。id应该在给定页面中是唯一的，如果不是，那么在通过 id 检索元素时，您通常只会得到第一次出现。

至少对于您正在使用的插件，您需要传入每个选择的 id，因此您需要做的是重命名您的每个选择（国家和州），以便它们是唯一的，然后更改相应的print_country方法以使用那个身份证

例如

  <select onchange="print_state('state1',this.selectedIndex);" //note state1
   id="country1" class="country" name = "country"></select>

...

 <script language="javascript">print_country("country1");</script>

并为您的其他两种形式做同样的事情。

通常，同时更新多个元素的最简单方法是使用一个类，例如将国家/地区类添加到您的国家/地区select，然后使用类选择器对其进行更新

 $('.country').val('YourValue');

顺便说一句，您确实将所有 JavaScript 代码与 html 分开，例如，您可以在页面底部放置一个内联脚本标签，而不是一堆内联脚本标签。

<script>
   $(function() {
       print_country("country1");
       print_country("country2");
       print_country("country3");
  });
</script>

php - JQuery Mobile 中的 JavaScript 文件在其他页面上不起作用

1 回答 1

Related

Reference