空白选项会自动追加到选择框中

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

我认为关闭时错误的选项标签，这不是一个封闭的选项，而是一个新的打开选项，导致浏览器错误地呈现选择。

请尝试使用相应的 html 标记，看看它是否可以解决。