Wie div erscheinen nur, wenn bestimmte Artikel aus der Liste ausgewählt ist

Question

ich diesen Code bekam:

<form> 
<select name="lelel"> 
    <option value="x">x</option> 
    <option value="xx">xx</option> 
    <option value="xxx">xxx</option> 
</select> 
</form> 
<div id="divid"> 
    LALALALALA 
</div> 

Und meine Frage ist, kann ich die div „divid“ sein unsichtbar machen und dann, wenn der Benutzer die wählt Option xxx das Div erscheint.

Answer 1

$('[name=lelel]').change(function(){ 
 
    if (this.value == 'xxx') { 
 
     $('#divid').show(); 
 
    }else{ 
 
     $('#divid').hide(); 
 
    } 
 
});

#divid {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form> 
 
<select name="lelel"> 
 
    <option value="x">x</option> 
 
    <option value="xx">xx</option> 
 
    <option value="xxx">xxx</option> 
 
</select> 
 
</form> 
 
<div id="divid"> 
 
    LALALALALA 
 
</div>

Answer 2

Wenn Sie mehrere divs haben würden, die/erscheinen verschwinden auf Benutzerauswahl basierend Sie mit der JS-Code erweitert auf Kauderwelsch Antwort, die folgen tun konnte

$('select').change(function(){ 
    var chosen_one = $(this).value(); 
    $('.toShow').hide(); 
    $('#'+chosen_one).show(); 
}) 

Sie kann dann alle divs geben, die eine Klasse von toShow gezeigt/versteckt werden und sie als display: none; in der CSS setzen. Dann, wenn Sie weitere Optionen/divs hinzufügen, müssen Sie Ihre JS oder CSS nicht ändern