启用灰显的下拉菜单[关闭](Enabling a grayed out dropdown menu [closed])

启用灰显的下拉菜单[关闭](Enabling a grayed out dropdown menu [closed])

除非用户从第一个“类型”表单中选择“播放器”，否则我希望“区域”表格变灰。 这就是我所拥有的

<form name="form1" method="post" action="submitform.php"> Search for:<br> <input type="text" value="" name="username"> <select name="Type"> <option value="">Select Type:</option> <option value="Ch">Champion</option> <option value="Pl">Player</option> <option value="It">Item</option></select> <select name="Region"> <option value="">Select Region:</option> <option value="br">BR</option> <option value="eune">EUNE</option> <option value="euw">EUW</option> <option value="lan">LAN</option> <option value="les">LES</option> <option value="na">NA</option> <option value="oce">OCE</option> <option value="ru">RU</option> <option value="tr">TR</option> <option value="kr">KR</option></select>

你怎么能这样做？

I'd like the "Region" form to be grayed out unless the user selected "Player" from the first "Type" form. Here's what I have

<form name="form1" method="post" action="submitform.php"> Search for:<br> <input type="text" value="" name="username"> <select name="Type"> <option value="">Select Type:</option> <option value="Ch">Champion</option> <option value="Pl">Player</option> <option value="It">Item</option></select> <select name="Region"> <option value="">Select Region:</option> <option value="br">BR</option> <option value="eune">EUNE</option> <option value="euw">EUW</option> <option value="lan">LAN</option> <option value="les">LES</option> <option value="na">NA</option> <option value="oce">OCE</option> <option value="ru">RU</option> <option value="tr">TR</option> <option value="kr">KR</option></select>

How can you go about doing this?

最满意答案

HTML：

<form name="form1" method="post" action="submitform.php"> Search for:<br> <input type="text" value="" name="username"> <select name="Type" id="type"> <option value="">Select Type:</option> <option value="Ch">Champion</option> <option value="Pl">Player</option> <option value="It">Item</option></select> <select name="Region" id="region" disabled> <option value="">Select Region:</option> <option value="br">BR</option> <option value="eune">EUNE</option> <option value="euw">EUW</option> <option value="lan">LAN</option> <option value="les">LES</option> <option value="na">NA</option> <option value="oce">OCE</option> <option value="ru">RU</option> <option value="tr">TR</option> <option value="kr">KR</option></select>

使用Javascript：

document.getElementById("type").onchange = function() { var type = document.getElementById("type"); var typeSelected = type.options[type.selectedIndex].text; if(typeSelected == "Player") { document.getElementById("region").disabled = false; } else { document.getElementById("region").disabled = true; } }

小提琴

HTML:

<form name="form1" method="post" action="submitform.php"> Search for:<br> <input type="text" value="" name="username"> <select name="Type" id="type"> <option value="">Select Type:</option> <option value="Ch">Champion</option> <option value="Pl">Player</option> <option value="It">Item</option></select> <select name="Region" id="region" disabled> <option value="">Select Region:</option> <option value="br">BR</option> <option value="eune">EUNE</option> <option value="euw">EUW</option> <option value="lan">LAN</option> <option value="les">LES</option> <option value="na">NA</option> <option value="oce">OCE</option> <option value="ru">RU</option> <option value="tr">TR</option> <option value="kr">KR</option></select>

Javascript:

document.getElementById("type").onchange = function() { var type = document.getElementById("type"); var typeSelected = type.options[type.selectedIndex].text; if(typeSelected == "Player") { document.getElementById("region").disabled = false; } else { document.getElementById("region").disabled = true; } }

Fiddle