javascript - 如何在 select 表单中使用 if else 语句？

Question

在我的注册页面中，我将使用两个下拉选择，其中一个应该被隐藏，如果它是负的，如果它是正的，新的下拉菜单将打开选择 ...

In mysql table I've table as diabetes name with enom

enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')

这是我的代码:

<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>



<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>

例如:如果Diabetes是negative值默认是负值那么Diabetes Type是hidden

和

如果糖尿病是阳性那么糖尿病类型会出现选择项目。

像 insulin、drug、mdm、mody 这样的值应该插入到这里:

value="positive"

如何通过java脚本实现？

我无法添加类、div 或跨度。是否可以仅通过 JavaScript 使用 ??

非常感谢

Answer 1

使用jquery，比较简单。

$(document).ready(function(){
 $("#diabetestype").hide();
 $("#diabetes").on("change", function(){
   var v = $(this).val();
   if(v=="positive"){
      $("#diabetestype").show();
   }else{
     $("#diabetestype").hide();
   } 
 });
});

要使此代码可行，您还需要添加 Positive 选项的值。因此，value="" 将其更改为 value="positive"。

您甚至还可以隐藏标签:

$(document).ready(function(){
 $("#diabetestype").closest("div").hide();
 $("#diabetes").on("change", function(){
   var v = $(this).val();
   if(v=="positive"){
      $("#diabetestype").closest("div").show();
   }else{
     $("#diabetestype").closest("div").hide();
   } 
 });
});