javascript - 第二个下拉列表选择第一个选择不会显示：无；

Question

JS

function getData(dropdown) {
    var value = dropdown.options[dropdown.selectedIndex].value;
    if (value == 'emlak'){
    document.getElementById("emlak").style.display = "block";
    }
    if(value == 'vasita'){
    document.getElementById("vasita").style.display = "block";
    }
}

HTML

<select name="kategori" onChange="getData(this);">
     <option value="hat" onClick="">Hat</option>
     <option value="emlak">Shirt</option>
     <option value="vasita">Pants</option>
</select>
<select id="emlak" name="currentList" onChange=";" style="display:none;">
     <option value="hat">Hat</option>
     <option value="emlak">Shirt</option>
     <option value="pants">Pants</option>
</select>
<select id="vasita" name="currentList" onChange="" style="display:none;">
     <option value="hat">Otomobil</option>
     <option value="emlak">Shirt</option>
     <option value="pants">Pants</option>
</select>

当我第二次选择一个选项时，第一个选择的选项不会显示：无；它应该只显示一个选择

Answer 1

因为您没有将其设置为无。这就是原因。

function getData(dropdown) {
    var value = dropdown.options[dropdown.selectedIndex].value;
    if (value == 'emlak'){
    document.getElementById("emlak").style.display = "block";  //where is the none for the other element?
    }
    if(value == 'vasita'){
    document.getElementById("vasita").style.display = "block"; //where is the none for the other element?
    }
}

基本思路：

function getData(dropdown) {
    var value = dropdown.options[dropdown.selectedIndex].value;
    var isEmlak = (value == 'emlak');
    document.getElementById("emlak").style.display = isEmlak ? "block" : "none";
    document.getElementById("vasita").style.display = !isEmlak ? "block" : "none";
}

Answer 2

这里引用了JSBin

function getData(dropdown) { 
  var value = dropdown.options[dropdown.selectedIndex].value;
  if (value == 'emlak'){
    document.getElementById("emlak").style.display = "block";
    document.getElementById("vasita").style.display = "none"; 
  }
  if(value == 'vasita'){
    document.getElementById("vasita").style.display = "block";
    document.getElementById("emlak").style.display = "none";  
  }
}

Answer 3

更改脚本如下：

function getData(dropdown) {
    var value = dropdown.options[dropdown.selectedIndex].value;
    if (value == 'emlak'){
        document.getElementById("emlak").style.display = "block";
        document.getElementById("vasita").style.display = "none";
    }

    if(value == 'vasita'){
        document.getElementById("vasita").style.display = "block";
        document.getElementById("emlak").style.display = "none";
    }

    if(value == 'hat'){
        document.getElementById("vasita").style.display = "none";
        document.getElementById("emlak").style.display = "none";
    }
}