javascript - 基于另一个下拉菜单选择的过滤下拉菜单

Question

我有多个下拉列表，并且想要根据第一个下拉列表中选择的内容过滤第二个下拉列表的内容。这是我迄今为止拥有的以下代码。我怎样才能做到这一点？

HTML/PHP:

<td>                        
    <select id="major" onChange="updateCat();">
        <?php foreach ($dropdown_major->fetchAll() as $drop_major): ?>
                <option
                    value=""
                    data-name="<?php echo $drop_major ['Major Category'];?>"
                >
                    <?php echo $drop_major ['Major Category'];?>
                </option>
        <?php endforeach; ?>
    </select>
</td>


<td>
    <select id="minor">
        <?php foreach ($dropdown_minor->fetchAll() as $drop_minor): ?>
                <option
                    value=""
                    data-name="<?php echo $drop_minor ['Minor Category'];?>"
                >
                    <?php echo $drop_minor ['Minor Category'];?>
                </option>
        <?php endforeach; ?>
    </select>
</td>

JavaScript:

function updateCat() {
    var e = document.getElementById("major");
    var majorSelected = e.options[e.selectedIndex];

    document.getElementById("minor").value = majorSelected.dataset.name;
}

数据库连接和SQL语句:

<?php
$host="xxxxxxxxxxx"; 
$dbName="xxxxx"; 
$dbUser="xxxxxxxxxxxxx"; 
$dbPass="xxxxxxxx";


$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sql_major = "SELECT DISTINCT [Major Category] FROM ProductTable ORDER BY [Major Category] ASC";
$sql_minor = "SELECT DISTINCT [Minor Category] FROM ProductTable ORDER BY [Minor Category] ASC";

$dropdown_major = $dbh->query($sql_major);
$dropdown_minor = $dbh->query($sql_minor);
?>

Answer 1

抱歉，没有太多时间无法回答您的代码，但给您一个示例肯定会对您有所帮助。运行下面的代码片段。

HTML

<select id="first" onchange="showsecondlist()">
<option>Select</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
<br>
<select id="second"></select>

和 JavaScript

function showsecondlist()
{
var uservalue=document.getElementById("first").value;
if(uservalue==1)
document.getElementById("second").innerHTML='<option value="1.1">1.1</option><option value="1.2">1.2</option>';
else if(uservalue==2)
document.getElementById("second").innerHTML='<option value="2.1">2.1</option><option value="2.2">2.2</option>';
}

此代码适合您，但尝试使用 JSON 向用户发送选项，然后根据用户对第一个下拉菜单的选择应用一些 if else 语句。

提示:如果您的号码很大。 select 语句中的选项或大号。代码中的 select 语句，然后先去学习 AJAX。它既简单又简单，您可以轻松学会。 JSON和AJAX几乎不需要2-3天。在Ajax中根据用户选择调用函数并使用JSON发送数据。虽然Ajax增加了no。向服务器发出请求，但会减少代码长度。这减少了页面加载时间，易于维护，并且有利于搜索引擎。 Google 喜欢代码更少、信息更多的页面，并且将来也将帮助您轻松解决许多问题。

function showsecondlist()
{
var uservalue=document.getElementById("first").value;
if(uservalue==1)
document.getElementById("second").innerHTML='<option value="1.1">1.1</option><option value="1.2">1.2</option>';
else if(uservalue==2)
document.getElementById("second").innerHTML='<option value="2.1">2.1</option><option value="2.2">2.2</option>';
}

<select id="first" onchange="showsecondlist()">
<option>Select</option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
<br><br>
<select id="second"></select>