Question

我想创建一个网页，其中包含2个下拉菜单和一个表格。为了更好地理解，我想创建类似this的东西。所以第一个下拉菜单会显示年份，第二个是国家名称。当我选择其中一个年份或其中一个国家名称时，表格中应该只显示那一年或该国家发行的那些硬币。

我在互联网上寻找这个问题，我发现了这个问题：

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

我想，我会给予更多＆＃34; id＆＃34;在表格中的相同标签中，能够选择下拉菜单和其他单元格以某种方式隐藏，但我发现，我无法添加更多＆＃34; id＆＃34;。所以现在我不知道，当我选择任何一个选项时，如何实现所选择的硬币只会在表格中显示。

任何建议，我该如何解决这个问题？

提前致谢。

Answer 1

您可以使用类而不是ID。因此，而不是id =“foo”，你有class =“foo”。

然后选择器（对于单个元素）document.querySelector（“。foo”）。

function toggle_visibility(selector) {
   var e = document.querySelector(selector);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

可以使用document.querySelectorAll

轻松扩展以隐藏/显示一组元素

此处示例：http://jsfiddle.net/86c93ao6/

Answer 2

解决此问题的一个好方法是使用AJAX来调用PHP脚本，该脚本将查询数据库，返回结果，然后将它们传递回AJAX回调。

您的jQuery只会在您的下拉列表中侦听.change()事件，然后调用AJAX脚本。

$('your_elem').change(function(){

    // Get the values
    var coin = $('your_elem option:selected').text();
    var country = $('other_elem option:selected').text();

    // Call the AJAX script
    get_new_results(coin, country);
});

// AJAX script which will call the PHP
function get_new_results(coin, country) {

    // Put the values in an array to pass to script
    var json = { 'coin' : coin, 'country' : country };

    // Create a request
    $.ajax({
        type: 'POST',
        url : 'path/to/your/script.php',
        data: { query : json },
        cache: false,

        // Update the table
        success: function(data) {
            // Remove all existing table data
            $('your_table').remove();

            // Your PHP file should echo back the new table, append this to the 
            // the old table container
            $('table_container').append(data);
        }

    });
}

这应该为您提供一个更新表的机制，现在我们将创建一个PHP文件，它将传回任何表数据以更新您的表。

<?php

// Variables 
$coin    = $_POST['query']['coin'];
$country = $_POST['query']['country'];

// Do some DB query
$query = 'SELECT * FROM table WHERE country = "' . $country . '" AND coin = "' . $coin . '"';

// Use PDO here to get your results 
$res = PDO QUERY FETCH ALL;

// Loop through results;
$rows = "";

foreach($res as $object) {
     $rows += '<tr><td>Specify your formatting</td></tr>';
}

// Echo out the new table to be appeneded, AJAX will capture this
echo '<table>' . $rows . '</table>';

好的，我还没有对此进行过测试，但我相信它应该为您提供良好的入门基础，希望有所帮助：）

编辑：有关放置物品的说明

为了让AJAX工作，你需要在头文件中包含对jQuery的引用，这是因为我们使用jQuery库来构建我们的AJAX调用，你可以在http://jquery.com下载jQuery。或者，您可以使用文件的外部托管源：

<script src="http://code.jquery.com/jquery-latest.min.js">

您还需要了解如何使用PDO in order to reference the database，就您的应用程序结构而言，您可以使用以下内容：

- app
--- views
------ your_view.php
------ other_view.php
--- commands 
------ update_table.php     <---- this is the script AJAX calls
- public
--- css
----- your_style.css
----- other_style.css
--- js
----- jQuery.js             <----- jQuery file, if you haven't sourced it externally
----- other_file.js  
----- ajax_commands.js      <----- the AJAX file containing all AJAX scripts

此结构实现了MVC框架，允许您为应用程序提供一些结构

在下拉菜单选项选择中显示表格中的一些单元格

2 个答案: