Javascript zeigen/verbergen Textfeld Eingabe, wenn "Andere" ausgewählt in mehreren wählen Eingabe

Question

Ich fürchte, ich bin fest und ich hoffte auf eine Gemeinschaft Weisheit.

Ich bin ein HTML-Formular erstellen, die Daten an eine SQL-Datenbank übermittelt. Eines der Formularfelder ist ein Mehrfachauswahl-Eingabefeld, in dem Benutzer den Typ der ausgeführten Operation auswählen können. Das Array wird dann als kommagetrennte Werte in ein SQL-Feld exportiert.

Das Problem, das ich habe, ist, dass ich auch möchte, dass Benutzer einen benutzerdefinierten Operationstyp eingeben können, wenn es nicht in der bereitgestellten Liste enthalten ist. Idealerweise würde dies die Auswahl von "Anderes" in der Mehrfachauswahl und das Erscheinen eines neuen Texteingabefeldes beinhalten.

Bis jetzt kann ich nur das Texteingabefeld erscheinen lassen, wenn der Benutzer 'Andere' und sonst nichts ausgewählt hat. Kann das Feld angezeigt werden, wenn der Benutzer mehrere Elemente ausgewählt hat, von denen eines "Andere" ist?

Vielen Dank

function showfield(episode_procedure){ 
 
      if(episode_procedure=='Other')document.getElementById('otherprocedure').innerHTML='Other: <input type="text" name="episode_otherprocedure" style="width: 450px;"/>'; 
 
      else document.getElementById('otherprocedure').innerHTML=''; 
 
     }

 
<select multiple="multiple" data-placeholder="Click to select..." size="7" name="episode_procedure[]" style="width: 450px;" onchange="showfield(this.options[this.selectedIndex].value)"></p> 
 
     <option value="anterior resection">anterior resection</option> 
 
     <option value="appendicectomy">appendicectomy</option> 
 
     <option value="Other">Other</option></select> 
 
     
 
     <div id="otherprocedure"></div>

Answer 1

Mit jQuery ist es sehr einfach, alle Werte in einem Mehr select Tag zu bekommen:

$(select).val() 

Jetzt müssen Sie nur, wenn das überprüfen 'Other' existiert innerhalb:

$(select).val().indexOf('Other') > -1 

$('#s1').on('change', function() { 
 
    if ($(this).val().indexOf('Other') > -1) { 
 
    $('#otherprocedure').html('Other: <input type="text" name="episode_otherprocedure" style="width: 450px;"/>') 
 
    } else { 
 
    $('#otherprocedure').html(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="s1" multiple="multiple" data-placeholder="Click to select..." size="7" name="episode_procedure[]" style="width: 450px;"> 
 
<option value="anterior resection">anterior resection</option> 
 
<option value="appendicectomy">appendicectomy</option> 
 
<option value="Other">Other</option></select> 
 

 
<div id="otherprocedure"></div>