'その他'オプションが選択されている場合にのみ実行するコードが必要です。 Javascript/swig

Question

JavaScriptを挿入するswig（私のテンプレートエンジンです）を使用して、選択オプション 'other'を選択した場合にのみ以下を表示します。

<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

あなただけ<select>要素のvalueプロパティを使用する必要があります。

ボタンを使用して関数を呼び出すと、を<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>