这个问题已经讨论了一天多了。我正在尝试使用 JavaScript 将项目从 HTML 文本字段添加到 HTML 选择/选项列表。然而，这些项目会在瞬间添加和消失。请有人帮忙。
您可以查看下面的完整源代码:
<!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>关于javascript - 将 HTML 文本字段中的输入添加到 HTML 选择/选项列表时，项目消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49054313/