<table id="selectsupp">
<tr>
<td>
<select id="category">
<option value="display" readonly="true">-Shop By Category-</option>
<option value="all">All</option>
<option value="preworkout">Pre Workout</option>
<option value="protein">Protein</option>
<option value="mass">Mass Gainer</option>
<option value="bcaa">BCAA</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="company">
<option value="display" readonly="true">-Shop By Company-</option>
<option value="all">All</option>
<option value="on">Optimum Nutrition</option>
<option value="mts">MTS</option>
<option value="mutant">Mutant Nutrition</option>
<option value="allmax">All Max</option>
</select>
</td>
<td>
<input type="submit" id="submit" name="search" value="Search" onclick="find()"/>
</td>
</tr>
</table>
<script>
function find(){
var category = document.getElementById('category');
var valueOfCategory = category.options[category.selectedIndex].value;
var company = document.getElementById('company');
var valueOfCompany = company.options[company.selectedIndex].value;
if (valueOfCategory === "all" && valueOfCompany === "all") {
alert("hello");
document.getElementsByTagName("select")[0].style.visibility = "hidden";
document.getElementsByTagName("select")[1].style.visibility = "hidden";
//display all suggested items
}
Hello there! I am facing an issue with hiding the select tag elements when submitting a form. I have tried setting their visibility to "hidden" but it seems that it's not working as expected. Any suggestions on how to fix this problem would be greatly appreciated.