Fatal编程技术网
  • javascript/
  • Javascript 将输入从HTML文本字段添加到HTML选择/选项列表时项目消失

Javascript 将输入从HTML文本字段添加到HTML选择/选项列表时项目消失

javascript html

Javascript 将输入从HTML文本字段添加到HTML选择/选项列表时项目消失,javascript,html,html-select,Javascript,Html,Html Select,我们已经讨论这个问题一天多了。我正在尝试使用JavaScript从HTML文本字段向HTML选择/选项列表添加项目。但是，这些项目会在瞬间添加和消失。请找个人帮忙 您可以在下面查看完整的源代码： <!DOCTYPE html> <html> <head> <title>Home</title> <link rel="stylesheet" type="text/css" href="CSS/mainoperatio

我们已经讨论这个问题一天多了。我正在尝试使用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>
文本输入和选项列表框的相关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()"
这将阻止您的表单提交和重新加载（从而在重新加载页面时清空select）。请参阅下面的修订片段：

函数insertValue（）{
var select=document.getElementById（“myselect”），
txtVal=document.getElementById（“条形码”）.value，
newOption=document.createElement（“选项”），
newOptionVal=document.createTextNode（txtVal）；
newOption.appendChild（newOptionVal）；
select.insertBefore（newOption，select.firstChild）；
返回false；
}

条形码：
进入
苹果
橙色
菠萝
简单添加：

onclick="insertValue(); return false;"
实际上，由于您的
insertValue
函数返回
false
，您实际上可以这样做

onclick="return insertValue()"
这将阻止您的表单提交和重新加载（从而在重新加载页面时清空select）。请参阅下面的修订片段：

函数insertValue（）{
var select=document.getElementById（“myselect”），
txtVal=document.getElementById（“条形码”）.value，
newOption=document.createElement（“选项”），
newOptionVal=document.createTextNode（txtVal）；
newOption.appendChild（newOptionVal）；
select.insertBefore（newOption，select.firstChild）；
返回false；
}

条形码：
进入
苹果
橙色
菠萝
伙计！我全心全意地爱你！非常感谢你。谢谢！上帝保佑你！谢谢你@大卫：没问题。就我个人而言，我会尝试使用
addEventListener
而不是
onclick
属性将此功能从HTML中分离出来，上面给出了一个示例。我后来还意识到，由于函数返回
false
，因此只需返回函数值并减少代码。还有一件事：把
onclick
处理程序想象成类似
onclick（）{///stuff//}
的东西，你就会明白为什么你在
insertValue
中返回的false没有做任何事情。非常正确。我同意这个新的。我会做出改变的。非常感谢你。真的很感激，伙计！我全心全意地爱你！非常感谢你。谢谢！上帝保佑你！谢谢你@大卫：没问题。就我个人而言，我会尝试使用
addEventListener
而不是
onclick
属性将此功能从HTML中分离出来，上面给出了一个示例。我后来还意识到，由于函数返回
false
，因此只需返回函数值并减少代码。还有一件事：把
onclick
处理程序想象成类似
onclick（）{///stuff//}
的东西，你就会明白为什么你在
insertValue
中返回的false没有做任何事情。非常正确。我同意这个新的。我会做出改变的。非常感谢你。非常感谢。