显示选定的下拉列表（javascript 或 jquery）答案

【问题标题】：Display the selected of a Drop down list (javascript or jquery)显示选定的下拉列表（javascript 或 jquery）
【发布时间】：2022-01-05 17:58:27
【问题描述】：

我想创建一个表单，其中用户有两个图像上传选项，护照、身份证或驾驶执照，但我希望当用户选择护照箱护照时，如果选择身份证或一张驾照，正反两面

<form action="">

  <select >
    <option >PASSPORT</option>
    <option >ID CARD</option>
    <option >DRIVER LICENSE</option>
   </select><BR><BR>

  <input type="file" id="myFile" name="PASSPORT"><BR><BR>
  
  <input type="file" id="myFile" name="FRONT ID"><BR><BR>
    
  <input type="file" id="myFile" name="BACK ID"><BR><BR>
  
  <input type="file" id="myFile" name="BACK DRIVER LICENSE"><BR><BR>
  
  <input type="file" id="myFile" name="BACK DRIVER LICENSE"><BR><BR> 

  <input type="submit">  
  
</form>

例子：

【问题讨论】：

为您的选项设置一个数据属性，并为您的输入提供相同的类名。检查何时选择更改选项，显示和隐藏正确的输入。

标签： javascript html jquery

【解决方案1】：

这是一种方法：

(document.querySelector("select").onchange=ev=>{
  document.querySelectorAll("input[type=file]").forEach(e=>{
    e.style.display=ev.target.value.toLowerCase().replaceAll(" ","")===e.className
      ? "block"
      : "none";
   })
})({target:{value:"passport"}});

input[type=file] {margin:10px 0px}

<form action="">
<select >
<option >PASSPORT</option>
<option >ID CARD</option>
<option >DRIVER LICENSE</option>
</select><BR><BR>
  <input type="file" class="passport" name="PASSPORT">  
  <input type="file" class="idcard"   name="FRONT ID">    
  <input type="file" class="idcard" name="BACK ID">  
  <input type="file" class="driverlicense" name="FRONT DRIVER LICENSE">  
  <input type="file" class="driverlicense" name="BACK DRIVER LICENSE">
  <input type="submit">  
</form>

我用class 属性替换了您无效的id 属性，并在select 元素上附加了一个事件侦听器。一旦事件被触发，选择框的值就会被用于输入元素的style.display 属性为“block”或“none”。

通过将整个函数定义放在括号 () 中并在其后附加参数 ({target:{value:"passport"}})，我有效地模拟了一个带有单个属性/子属性的虚假“事件对象”的事件的触发：@ 987654330@。这将使第一个输入组可见，同时隐藏所有其他输入组。

【讨论】：