Eine leere Option automatisch in Auswahlfeld anfügen

Question

Ich bin Textfeld Wert in Auswahlfeld Option anfügen, wenn wir auf Senden Schaltfläche klicken, funktioniert es richtig, aber wenn dieser Wert in Auswahlfeld angehängt zeigt es eine weitere leere Option, die ich überprüft habe in inspect element, warum es passiert, was sollten wir dafür tun. Ich habe diesen Grund bisher nicht gefunden.

Ich angehängt Textfeld Wert in Auswahlfeld Option, wenn wir auf Senden Schaltfläche klicken, funktioniert es richtig, aber wenn dieser Wert in Auswahlfeld angehängt zeigt es eine weitere leere Option, ich habe überprüft inspect-Element, warum es passiert Was sollen wir dafür tun? Ich habe diesen Grund bisher nicht gefunden.

$(function(){ 
 
    var x=[]; 
 
    
 
    $("#itemDone").click(function(){ 
 
     var y=$("#itemType").val(); 
 
     var z=$("#itemName").val(); 
 
     x.push(z); 
 
    
 
     for(i=1; i<x.length; i++){ 
 
      $("#itemType").append('<option value="x[i]">'+x[i]+'<option>'); 
 
      $("#itemplace1 ul").append('<li>'+x[i]+'</li>'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    
 
    <div class="row"> 
 
    
 
    
 
    <div class="col-md-3" style="background: #efefef;; height: 100vh;"> 
 
    <br /> 
 
    <div id="itemplace1"> 
 
    <ul></ul> 
 
    </div> 
 
    
 
    
 
    </div> 
 
    
 
    <div class="col-md-9" style="background: rgba(255, 165, 0, 0.25); height: 100vh;"> 
 
    <br /> 
 
    <input type="text" id="itemName" /> 
 
    <select id="itemType"> 
 
    
 
    </select> 
 
    <br /><br /> 
 
    <button id="itemDone">Submit</button> 
 
    </div> 
 
    
 
    </div>

Answer 1

Hier ist die Lösung, um Sie den Code ein:

$(function(){ 
 
    var x=[]; 
 
    
 
    $("#itemDone").click(function(){ 
 
     var y=$("#itemType").val(); 
 
     var z=$("#itemName").val(); 
 
     x.push(z); 
 
     
 
     $("#itemType").children().remove(); 
 
     $("#itemplace1 ul").children().remove(); 
 
     
 
     for(i=0; i<x.length; i++) { 
 
      $("#itemType").append('<option value="x[i]">'+x[i]+'</option>'); 
 
      $("#itemplace1 ul").append('<li>'+x[i]+'</li>'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="row"> 
 
    <div class="col-md-3" style="background: #efefef;; height: 100vh;"> 
 
     <br /> 
 
     <div id="itemplace1"> 
 
     <ul></ul> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-9" style="background: rgba(255, 165, 0, 0.25); height: 100vh;"> 
 
     <br /> 
 
     <input type="text" id="itemName" /> 
 
     <select id="itemType"> 
 

 
     </select> 
 
     <br /> 
 
     <br /> 
 
     <button id="itemDone">Submit</button> 
 
     </div>  
 
</div>

1. reinigen einige der HTML-Code (<br /> Element sollte selbst schließen) .
2. Reinigen Sie die Elemente #itemType und #itemplace1 ul bei jedem Klick.
3. Das <option> Element sollte mit </option> und nicht einem anderen <option> Tag geschlossen werden.
4. Die for Schleife bei 0 beginnen sollte und nicht 1

Answer 2

Ich denke, den falschen Option-Tag in Schließung, das ist nicht eine geschlossene Option, sondern eine neue Öffnung eines, verursacht der Browser zu schlecht die Auswahl machen.

Bitte versuchen Sie eine korrekte HTML-Markup und sehen, ob es löst.