javascript - 需要代码仅在选择 'other' 选项时运行 | Javascript/痛饮

Question

我想使用 swig(它是我的模板引擎)插入 JavaScript，以便只有在选择“其他”选项时才会显示以下内容。

<div class="form-group">
 <select class="custom-select">
  <option selected>Select Switch Manufacturer</option>
  <option value="cisco">Cisco</option>
  <option value="netgear">NetGear</option>
  <option value="d-link">D-link</option>
  <option value="tp-link">TP-link</option>
  <option value="hewlett-packard">Hewlett-Packard</option>
  <option value="linksys">Linksys</option>
  <option value="allied">Allied</option>
  <option value="brocade">Brocade</option>
  <option value="other">Other</option>
 </select>

这是我只想在用户在上面的代码中选择“其他”选项时显示的代码。我如何使用 Javascript/swig 做到这一点？

<div class="form-group">
 <input type="text" class="form-control" id="switch-manufacturer" placeholder="Switch Manufacturer">
</div> <!-- Switch Manufacturer other input only show when above 'other' is selected -->

Answer 1

我给你做了一支笔。

https://codepen.io/anon/pen/WZENjo

您只需要使用 value <select> 的属性(property)元素。

我用了一个按钮来调用函数，你可以使用任何你想要的，包括添加一个onclick。到 <select>元素，看起来像这样。

<div class="form-group">
 <select class="custom-select" id="sel" onclick="foo()">
  <option selected>Select Switch Manufacturer</option>
  <option value="cisco">Cisco</option>
  <option value="netgear">NetGear</option>
  <option value="d-link">D-link</option>
  <option value="tp-link">TP-link</option>
  <option value="hewlett-packard">Hewlett-Packard</option>
  <option value="linksys">Linksys</option>
  <option value="allied">Allied</option>
  <option value="brocade">Brocade</option>
  <option value="other">Other</option>
 </select>