2017-09-30 2 views
0

Ich möchte swig (es ist meine Template-Engine) verwenden, um JavaScript einzufügen, so dass das Folgende nur dann angezeigt wird, wenn die Option 'Andere' gewählt wurde.Code muss nur ausgeführt werden, wenn 'andere' Option ausgewählt ist | Javascript/swig

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

Dies ist der Code Ich will nur zeigen, wenn der Benutzer über die ‚andere‘ Option im Code auswählt. Wie kann ich das mit Javascript/swig machen?

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

Haben Sie Client-Seite Javascript? WHat ist der Ereignishandler (onClick)? Welchen Framework/Bibliotheken benutzen Sie? – akaphenom

+0

Ich benutze Node.js mit Express und Swig. Kein clientseitiges Javascript noch anderes als grundlegendes Armaturenbrettzeug. –

Antwort

1

Ich habe einen Stift für Sie gemacht.

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

Sie müssen nur die value Eigenschaft des <select> Element verwenden.

Ich habe eine Taste verwendet, um die Funktion aufzurufen, Sie können verwenden, was auch immer Sie wollen, einschließlich Hinzufügen eines onclick zum <select> Element, das in etwa so aussehen würde.

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

ich versuchte, diesen Stift zu folgen und kam mit dieser aber es scheint nicht '

' –

+0

Sie können nicht ein' onclick' auf ein 'option' Element setzen, nur' select'. Darüber hinaus können Sie kein anderes Element in ein option-Element einfügen. Sie müssten eine Alternative verwenden, z. B. eine andere Art von Dropdown-Menü, oder das Element außerhalb des Elements "option" platzieren. Ich gebe Ihnen die zweite Option in diesem Stift https://codepen.io/anon/pen/LzjpVJ – Ben

+0

Wenn Sie unbedingt die Textbox in der Dropdown-Liste haben müssen, gibt es mehrere Frameworks, die Sie das tun können. – Ben

Verwandte Themen