现在已经有一天多了这个问题。我正在尝试使用JavaScript从HTML文本字段向HTML Select / Option列表添加项目。但是，这些项目会在瞬间添加和消失。请帮助一下。
您可以查看下面的完整源代码：
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="CSS/mainoperations.css">
</head>
<body>
<div class="header">
</div>
<div id="container">
<div id="leftcolumn">
<ul>
<h1>PartsCribber</h1>
<li><a class="active" href="mainoperations.php">Main Operations</a></li>
<li><a href="vieweditprofile.php">Profile Settings</a></li>
<li><a href="#contact">Change Password</a></li>
<li><a href="#about">Student Cart</a></li>
<li><a href="#about">Student Possession</a></li>
<li><a href="#about">Update Inventory</a></li>
<li><a href="#about">Log Out</a></li>
</ul>
</div>
<div id="rightcolumn">
<form>
<div class="title">
<h3>
<?php echo "View/Edit Profile"; ?>
</h3>
</div>
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success">
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
<?php include('errors.php'); ?>
<div class="input-group">
<label>Barcode:</label>
<input type="text" id="barcode">
</div>
<div class="input-group">
<button class="btn" onclick="insertValue()" >Enter</button>
</div>
<select id="myselect" size="10" class="select">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
</select>
</form>
<script>
function insertValue()
{
var select = document.getElementById("myselect"),
txtVal = document.getElementById("barcode").value,
newOption = document.createElement("OPTION"),
newOptionVal = document.createTextNode(txtVal);
newOption.appendChild(newOptionVal);
select.insertBefore(newOption,select.firstChild);
return false;
}
</script>
</div>
<div style="clear: both;" > </div>
</div>
</body>
</html>
我一直主演的功能：
function insertValue()
{
var select = document.getElementById("myselect"),
txtVal = document.getElementById("barcode").value,
newOption = document.createElement("OPTION"),
newOptionVal = document.createTextNode(txtVal);
newOption.appendChild(newOptionVal);
select.insertBefore(newOption,select.firstChild);
return false;
}
文本输入和选项列表框的相关HTML代码：
<div class="input-group">
<label>Barcode:</label>
<input type="text" id="barcode">
</div>
<div class="input-group">
<button class="btn" onclick="insertValue()" >Enter</button>
</div>
<select id="myselect" size="10" class="select">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
</select>
简单添加：
onclick="insertValue(); return false;"
实际上，因为你的insertValue函数返回false，你实际上可以做到
onclick="return insertValue()"
这将阻止您的表单提交和重新加载（因此在重新加载页面时清空选择）。请参阅下面的修改后的片段：
function insertValue() {
var select = document.getElementById("myselect"),
txtVal = document.getElementById("barcode").value,
newOption = document.createElement("OPTION"),
newOptionVal = document.createTextNode(txtVal);
newOption.appendChild(newOptionVal);
select.insertBefore(newOption,select.firstChild);
return false;
}<form>
<div class="input-group">
<label>Barcode:</label>
<input type="text" id="barcode">
</div>
<div class="input-group">
<button class="btn" onclick="insertValue(); return false;">Enter</button>
</div>
<select id="myselect" size="10" class="select">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
</select>
</form>就个人而言，我会稍微改写一下你的代码，以使它更清晰，不使用onclick：
var select = document.getElementById("myselect");
var add = document.getElementById("add-barcode");
var barcode = document.getElementById("barcode");
add.addEventListener('click', function( event ){
event.preventDefault();
var option = document.createElement( 'option' );
option.textContent = barcode.value;
select.insertBefore( option, select.childNodes[ 0 ] );
});<form>
<div class="input-group">
<label>Barcode:</label>
<input type="text" id="barcode">
</div>
<div class="input-group">
<button id="add-barcode" class="btn">Enter</button>
</div>
<select id="myselect" size="10" class="select">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
</select>
</form>