Le code doit être exécuté uniquement lorsque l'option 'other' est sélectionnée | Javascript/swig

Question

Je veux utiliser swig (c'est mon moteur de template) pour insérer du JavaScript de sorte que ce qui suit n'apparaisse que lorsque l'option select 'other' est choisie.

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

C'est le code que je veux montrer que lorsque l'utilisateur sélectionne l'option « autre » dans le code ci-dessus. Comment puis-je le faire avec 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

J'ai fait un stylo pour vous.

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

Vous avez juste besoin d'utiliser la propriété value de l'élément <select>.

J'ai utilisé un bouton pour appeler la fonction, vous pouvez utiliser ce que vous voulez, y compris ajouter un onclick à l'élément <select>, qui ressemblerait à ceci.

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