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 First。它简单易学，您可以轻松学习。 JSON和AJAX几乎不需要2-3天。在Ajax调用函数中根据用户选择并使用JSON发送数据。虽然Ajax没有增加。请求到服务器，但它会减少代码长度。这减少了页面加载时间，易于维护，并且对搜索引擎有益。 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>

根据另一个下拉选择筛选下拉列表

1 个答案: