根据下拉选择显示/隐藏内容答案

【问题标题】：Show/Hide content based on drop-down selection根据下拉选择显示/隐藏内容
【发布时间】：2017-03-22 11:19:37
【问题描述】：

这是我第一次发帖，我刚开始学习如何编写 js。所以基本上，我想知道的是如何根据用户从下拉列表中选择的项目显示或隐藏内容。

这是php代码：

<script src="js/category.js"></script>

<?php
include 'dbh.php';

$sqli='SELECT * FROM categories';
$getdata=mysqli_query($conn,$sqli);

echo "
<form action='category_input.php' method='POST' id='categoryform'>

Category: <select name='category_id'>";
while($row = mysqli_fetch_assoc($getdata))
        {
        echo 
        '<option value='.$row['id'].'>'.$row['category_name'].'</option>';
        };
echo '</select></form>';


echo "
<div style='display:none;' id='computer'>

<br><br>
Part Number:
<input type='text' style='width:200px' name='part_number' placeholder='Serial Number'>

<br><br>
Serial Number:
<input type='text' style='width:200px' name='serial_number' placeholder='Serial Number'>

<br><br>
<label>Description</label>
<textarea rows='4' cols='50' name='description' form='categoryform'>
</textarea>
<br><br>

</div>
";

echo "
<div style='display:none;' id='peripheral'>

<br><br>
Brand:
<input type='text' style='width:200px' name='brand' placeholder='Brand'>

<br><br>
Type:
<input type='text' style='width:200px' name='type' placeholder='Type'>

<br><br>
Type:
<input type='text' style='width:200px' name='type' placeholder='Type'>

<br><br>
Part Number:
<input type='text' style='width:200px' name='part_number' placeholder='Part Number'>

<br><br>
Serial Number:
<input type='text' style='width:200px' name='serial_number' placeholder='Serial Number'>
<br><br>

</div>";

这是 category.js 代码：

var selectedVal =  document.getElementsByName("category_id").value;

if(selectedVal == '1')  // Put any condition here selectedVal == '1'
{
    var element = document.getElementById('computer');
    element.style.visibility = 'hidden';      // Hide
}
else
{
    var element = document.getElementById('computer');
    element.style.visibility = 'visible';     // Show
}

这是 category_name 列表：

PC
Notebook
Server
Scanner
Printer
DVD
AccessPoint/Wireless
Mikrotik
Fingerprint
Monitor
Rack Server
DVR
FotoCopy
TV
Modem
Camera
External Storage
ThinClient
Projector
STB BOX(Indihome TV)
VOIP
UPS
Switch
Keyboard
Mouse

当我点击 category_id = 1 时，我尝试检查它是否有效，但它没有回显 div id="computer"

很抱歉，这篇文章很长，如果我需要添加更多信息和反馈，请告诉我应该如何做未来的帖子。

编辑：添加js

【问题讨论】：

Javascript Dropdown Show/Hide Div的可能重复

标签： javascript php

【解决方案1】：

试试这个：

var selectedVal =  document.getElementsByName("category_id").value;

if(selectedVal == '1')  // Put any condition here selectedVal == '1'
{
    var element = document.getElementById('id');
    element.style.visibility = 'hidden';      // Hide
}
else
{
    var element = document.getElementById('id');
    element.style.visibility = 'visible';     // Show
}

【讨论】：

“我想知道的是如何显示或隐藏内容”
如何隐藏/显示不同的 div？例如，我希望它显示 div id="computer"
是的，您可以，只需选择特定的 html 元素并对其应用 show hide
嗯，好的，谢谢 - 对不起，我对 javascript 还是很陌生，因为我一个小时前就开始学习它了 xD

【解决方案2】：

更新所以我找到了一个可行的解决方案：

<script>
function populateField() {
    selectedVal = document.getElementById('select').value;
    if((selectedVal == '1') || (selectedVal == '2') || (selectedVal == '3'))
    {   
        $("#computer").show();
        $("#peripheral").hide();
    }
    else
    {
        $("#computer").hide();
        $("#peripheral").show();
    }
}

使用这个：
<select style='width:100%;' name='category_name' id='select' onchange='populateField()'>

【讨论】：