javascript - 空白选项自动附加到选择框中

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 开始