一個空白選項自動附加在選擇框中

Question

我在附加文本框的值選擇框選項當我們點擊提交按鈕時，它的工作正常，但是當這個值附加在選擇框中它顯示了一個更多的空白選項，我已經檢查在檢查內容中，爲什麼會發生，我們應該怎麼做。到目前爲止我還沒有找到這個理由。

我追加在選擇框中選擇文本框的值當我們點擊提交按鈕，它的工作正確的，但是當這個值在選擇框追加它顯示了一個更空的選項，我已經檢查在檢查元素，爲什麼它的發生，我們該怎麼做。到目前爲止我還沒有找到這個理由。

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

這裏是修復你的代碼：

$(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. 乾淨一些的HTML代碼（<br />元素應自閉） 。
2. 清理每次點擊中的#itemType和#itemplace1 ul元素。
3. <option>元素應該使用</option>關閉，而不是另一個<option>標記。
4. 的for循環應該從0開始，而不是1

Answer 2

我認爲錯誤的選項標籤在最後，這是不是一個封閉的選擇，而是一種新的開放之一，導致瀏覽器不好使的選擇。

請嘗試使用corret html標記，看看它是否解決。