Question

我有一个JS文件，其中包含国家/地区列表以及这些国家/地区的州/地区。我有1个jquery移动页面，有3个表单，我已经把代码包含在头文件中的js文件。当我到达每个锚点时，第一个表单将由我选择，但其他两个表单不会。发生了什么事？

<?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>

Countries.js

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

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

Answer 1

您的问题是您在同一页面上多次使用相同的id属性。 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>

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

一般来说，同时更新多个元素的最简单方法是使用class，例如将国家/地区类添加到您的国家/地区select，然后使用该类更新它选择器

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

作为一个侧面点，您实际上将所有JavaScript代码与html分开，例如，您可以在页面底部放置一个内联脚本标记，而不是一堆内联脚本标记。

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

JQuery Mobile中的JavaScript文件无法在其他页面上运行

1 个答案: