私が[送信]ボタンをクリックすると、選択ボックスのオプションにテキストボックスの値を追加します。その値は選択ボックスに追加されます。 inspect要素で、なぜそれが起こっているのか、これに対してどうすればよいのでしょうか?私はこれまでのところこの理由を見つけていない。空白のオプションが選択ボックスに自動的に追加されます
送信ボタンをクリックしたときに選択ボックスオプションにテキストボックスの値を追加していますが、この値が選択ボックスに追加されるともう1つ空白のオプションが表示されます。このために何をすべきか?私はこれまでのところこの理由を見つけていない。ここで
$(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>
新しい値だけでなく、x配列全体を再読み込みする理由がありますか?また配列0のインデックス1で始まりません。 –