草庐IT

php - 链式选择菜单效果很好,但需要稍作调整

coder 2023-10-23 原文

目前,我的链式选择菜单运行良好。

但是目前当页面加载时第一个下拉菜单是完全空的

我更愿意用以下所有结果填充菜单: SELECT * FROM employees 然后如果用户从第二个下拉列表中选择一个选项,它将启动 AJAX 并根据选择过滤结果。

这可能吗?

这是我的文件:

dept_form.html(HTML 表单):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Employees by Department</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="ajax.js" type="text/javascript"></script>
    <script src="dept.js" type="text/javascript"></script>
    <style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<!-- dept_form_ajax.html -->
<p>Select a department and click 'GO' to see the employees in that department.</p>
<form action="" method="get" id="dept_form">
<select id="results"></select>
<p>
<select id="did" name="did">
<option value="1">Human Resources</option>
<option value="2">Accounting</option>
<option value="3">Marketing</option>
<option value="4">Redundancy Department</option>
</select>
</p>
</form>

</body>
</html>

ajax.js :

// ajax.js

/*  This page defines a function for creating an Ajax request object.
 *  This page should be included by other pages that 
 *  need to perform an XMLHttpRequest.
 */

/*  Function for creating the XMLHttpRequest object.
 *  Function takes no arguments.
 *  Function returns a browser-specific XMLHttpRequest object
 *  or returns the Boolean value false.
 */
function getXMLHttpRequestObject() {

    // Initialize the object:
    var ajax = false;

    // Choose object type based upon what's supported:
    if (window.XMLHttpRequest) {

        // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
        ajax = new XMLHttpRequest();

    } else if (window.ActiveXObject) { // Older IE browsers

        // Create type Msxml2.XMLHTTP, if possible:
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) { // Create the older type instead:
            try {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }

    } // End of main IF-ELSE IF.

    // Return the value:
    return ajax;

} // End of getXMLHttpRequestObject() function.

部门.js :

// dept.js

/*  This page does all the magic for applying
 *  Ajax to an employees listing form.
 *  The department_id is sent to a PHP 
 *  script which will return data in HTML format.
 */

// Have a function run after the page loads:
window.onload = init;

// Function that adds the Ajax layer:
function init() {

  // Get an XMLHttpRequest object:
  var ajax = getXMLHttpRequestObject();

  // Attach the function call to the form submission, if supported:
  if (ajax) {

    // Check for DOM support:
    if (document.getElementById('results')) {

      // Add an onsubmit event handler to the form:
      $('#did').change(function() {

        // Call the PHP script.
        // Use the GET method.
        // Pass the department_id in the URL.

        // Get the department_id:
        var did = document.getElementById('did').value;

        // Open the connection:
        ajax.open('get', 'dept_results_ajax.php?did=' + encodeURIComponent(did));

        // Function that handles the response:
        ajax.onreadystatechange = function() {
          // Pass it this request object:
          handleResponse(ajax);
        }

        // Send the request:
        ajax.send(null);

        return false; // So form isn't submitted.

      } // End of anonymous function.

    )} // End of DOM check.

  } // End of ajax IF.

} // End of init() function.

// Function that handles the response from the PHP script:
function handleResponse(ajax) {

  // Check that the transaction is complete:
  if (ajax.readyState == 4) {

    // Check for a valid HTTP status code:
    if ((ajax.status == 200) || (ajax.status == 304) ) {

      // Put the received response in the DOM:
      var results = document.getElementById('results');
      results.innerHTML = ajax.responseText;

      // Make the results box visible:
      results.style.display = 'block';

    } else { // Bad status code, submit the form.
      document.getElementById('dept_form').submit();
    }

  } // End of readyState IF.

} // End of handleResponse() function.

dept_results_ajax.php

<?php # dept_results_ajax.php

// No need to make a full HTML document!

// Validate the received department ID:
$did = 0; // Initialized value.
if (isset($_GET['did'])) { // Received by the page.
  $did = (int) $_GET['did']; // Type-cast to int.
}

// Make sure the department ID is a positive integer:
if ($did > 0) {

  // Get the employees from the database...

  // Include the database connection script:
  require_once('mysql.inc.php');

  // Query the database:
  $q = "SELECT * FROM employees WHERE department_id=$did ORDER BY last_name, first_name";
  $r = mysql_query($q, $dbc);

  // Check that some results were returned:
  if (mysql_num_rows($r) > 0) {

    // Retrieve the results:
    while ($row = mysql_fetch_array($r, MYSQL_ASSOC)) {

      ?>
      <option value="<?php echo $row['last_name']; ?>"><?php echo $row['last_name']; ?></option>
      <?php
    } // End of WHILE loop.

  } else { // No employees.
    echo '<p class="error">There are no employees listed for the given department.</p>';
  }

  // Close the database connection.
  mysql_close($dbc);

} else { // Invalid department ID!
  echo '<p class="error">Please select a valid department from the drop-down menu in order to view its employees.</p>';
}

?>

有人可以解释我需要在脚本中进行哪些更改才能实现我的要求。

非常感谢任何指点。非常感谢。

最佳答案

您可以通过两种方式做到这一点:首先,您可以让一个 PHP 脚本生成 dept_form.html(当然,它随后会变成一个 .php 文件)并将 MySQL 查询的所有结果放入菜单中;第二种(也是首选,尤其是对于大型数据集)方法是在 dept.js 中的 if (document.getElementById('results')) { 之后插入几行以加载所有数据,所以甚至在 $('#did').change 事件上设置函数之前。然后,这些行将简单地对 PHP 脚本进行 AJAX 调用并获取您需要的所有数据。

顺便说一句,您可能需要考虑使用 jQuery,这将使您在 AJAX 调用方面的生活变得更加轻松。希望这能有所帮助。

编辑

尝试使用这样的东西:

// Open the connection:
ajax.open('get', 'dept_results_ajax.php');

// Function that handles the response:
ajax.onreadystatechange = function() {
    // Pass it this request object:
    handleResponse(ajax);
}

// Send the request:
ajax.send(null);

然后,在您的 PHP 脚本中,只需将您已有的相同代码放在 else 子句下,除了处理部门 ID 所需的部分,所以几乎只要您有 $didWHERE 子句。

关于php - 链式选择菜单效果很好,但需要稍作调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9317608/

有关php - 链式选择菜单效果很好,但需要稍作调整的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗? - 2

    当我使用Bundler时,是否需要在我的Gemfile中将其列为依赖项?毕竟,我的代码中有些地方需要它。例如,当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试,但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/4758609/

  2. ruby - rspec 需要 .rspec 文件中的 spec_helper - 2

    我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require,它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中,因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗? 最佳答案 我不在Bundler上工作,所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件,通常按照当前的惯例,只

  3. ruby - 如何在 Lion 上安装 Xcode 4.6,需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby,并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  4. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序,其中需要一个可供用户选择颜色的字段,该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”,并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中,因此使用基

  5. ruby - 为什么在 ruby​​ 中创建 Rational 不需要新方法 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书,我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)?

  6. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗? - 2

    我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or

  7. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频,可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗?为此,表单应该是什么样的?目前我有类似的东西但显然它允许多项选择,而我试图将它限制为只有一个..怎么办? 最佳答案 如果要使用字符串列,让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  8. ruby-on-rails - 需要帮助最大化多个相似对象中的 3 个因素并适当排序 - 2

    我需要用任何语言编写一个算法,根据3个因素对数组进行排序。我以度假村为例(如Hipmunk)。假设我想去度假。我想要最便宜的地方、最好的评论和最多的景点。但是,显然我找不到在所有3个中都排名第一的方法。Example(assumingthereare20importantattractions):ResortA:$150/night...98/100infavorablereviews...18of20attractionsResortB:$99/night...85/100infavorablereviews...12of20attractionsResortC:$120/night

  9. ruby - 我需要从 facebook 游戏中抓取数据——使用 ruby - 2

    修改(澄清问题)我已经花了几天时间试图弄清楚如何从Facebook游戏中抓取特定信息;但是,我遇到了一堵又一堵砖墙。据我所知,主要问题如下。我可以使用Chrome的检查元素工具手动查找我需要的html-它似乎位于iframe中。但是,当我尝试抓取该iframe时,它​​是空的(属性除外):如果我使用浏览器的“查看页面源代码”工具,这与我看到的输出相同。我不明白为什么我看不到iframe中的数据。答案不是它是由AJAX之后添加的。(我知道这既是因为“查看页面源代码”可以读取Ajax添加的数据,也是因为我有b/c我一直等到我可以看到数据页面之后才抓取它,但它仍然不存在)。发生这种情况是因为

  10. ruby-on-rails - CarrierWave - PDF - 只选择第一页 - 2

    我的Rails应用程序中安装了carrierwave。但是,当用户上传多页pdf时,我只希望应用程序获取文档中的第一页并将其转换为jpeg。这可能吗?用什么命令?这是我的uploader。#encoding:utf-8classImageUploader[200,300]##defscale(width,height)##dosomething#end#Createdifferentversionsofyouruploadedfiles:version:thumbdoprocess:resize_to_fill=>[150,210]process:convert=>:jpgdefful

随机推荐