Filter Dropdown Based on Another Dropdown Selection

∥☆過路亽.° 提交于 2021-01-29 03:00:40

问题


I have multiple dropdowns and want to filter the contents of the second dropdown based on what is selected in the first dropdown. Here is the following code that I have so far. How could I do this?

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

Database connection and SQL statements:

<?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);
?>

回答1:


Sorry don't have much time can't make your answer for your code but giving you an example which will surely help you. run snippet below.

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>

and 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>';
}

this code will work for you but try to use JSON for sending options to user and then apply some if else statement according to user selection of first drop down.

Tip: If you have large no. of options in select statement or large no. of select statements in your code then go and learn AJAX First. its easy and simple you can learn it easily. JSON and AJAX hardly takes 2-3 days.In Ajax call function according to user selection and send data using JSON. Although Ajax increases no. of request to server but it will decrease code length. which decreases page load time, easy to maintain, and good for search engine. Google love pages with less code and more information and will help you in future too to solve lots of problems easily.

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>


来源:https://stackoverflow.com/questions/42144695/filter-dropdown-based-on-another-dropdown-selection

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!