将 HTML 文本字段的输入添加到 HTML Select/Option 列表时项目消失

Question

关注这个问题已经一天多了。我正在尝试使用 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>

Answer 1

简单添加：

onclick="insertValue(); return false;"

实际上，由于您的 insertValue 函数 returns false，您实际上可以

onclick="return insertValue()"

这将阻止您的表单提交和重新加载（因此在重新加载页面时清空 select）。请参阅下面的修改后的代码段：

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>

将 HTML 文本字段的输入添加到 HTML Select/Option 列表时项目消失

Items disappearing when adding input from HTML textfield to HTML Select/Option List

html

javascript

html-select