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

Question

我想创建一个表单，其中用户有两个图像上传选项，护照，身份证或驾驶执照，但我想要当用户选择护照箱护照时，如果选择身份证或驾驶执照，前后两个

<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>

例子：

例子

Answer 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元素上附加了一个事件侦听器。 一旦事件被触发，select 框的值将用于输入元素的style.display属性为“block”或“none”。

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