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

我想创建一个网页，其中有两个下拉菜单和一个表格。为了更好的理解，我想创造一些类似的东西。因此，第一个下拉菜单将显示年份，第二个下拉菜单将显示国家名称。当我选择某一年或某个国家的名称时，表中应仅显示该年或该国发行的硬币

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

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

我是福

我想，我会给表中的同一个标记更多的“id”，以便能够选择下拉菜单和其他要隐藏的单元格，但我发现，我无法添加更多的“id”。所以现在我不知道，当我选择任何一个选项时，表中只会显示所选的一组硬币

有什么建议，我该如何解决这个问题

---

提前感谢。

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

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

可以使用document.querySelectorAll轻松地扩展它以隐藏/显示一组元素

---

这里的示例：

解决此问题的一个好方法是调用一个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或PHP方面的经验。那么你能告诉我，我应该把代码贴在哪里吗？我应该创建一个新文件并以某种方式引用该文件，比如CSS文件，还是应该将其粘贴到HTML文件中？
<?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>';

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

- 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