0

好的，假设我有一个如下所示的下拉菜单：

  <form action="" method="POST" name="myform">
            <select name="test_select">
                <option value="1">my val 1</option>
                <option value="3">my val 3</option>
                <option value="4">my val 4</option>
            </select>
            <input type="submit" value="test_button" name="test_button">
        </form>

只是一个基本的菜单。如何使用功能搜索菜单并将值 2 添加到菜单中？我希望它最终看起来像这样：

 <form action="" method="POST" name="myform">
                <select name="test_select">
                    <option value="1">my val 1</option>
                    <option value="2">my val 2</option>
                    <option value="3">my val 3</option>
                    <option value="4">my val 4</option>
                </select>
                <input type="submit" value="test_button" name="test_button">
            </form>

我尝试制作一个函数，以显示我想用这个去哪里。

<script>
        function addItems()
        {
            var option = document.createElement("option");

            option.text = "val 2"
            option.value = 2

            for (var i = 1; i < 3; i++; ) {
                if (document.getElementsByName.value < 2) {
                    option.text = "val 2"
                    option.value = 2
                }
            }

        }
    </script>

如何使此功能起作用？

4

3 回答 3

1

我稍微修改了您的代码以使其正常工作

function addItems()
    {
      var option = document.createElement("option");

      option.text = "val 2";
      option.value = 2;

      var select = document.getElementsByName('test_select');
      var firstGreater = null;
      if (select.length > 0)
      {
        for(var i = 0; i < select[0].children.length; i++)
        {
          if (select[0].children[i].value > 2)
          {
            firstGreater = select[0].children[i];
            break;
          }

        }
        if (firstGreater != null)
          select[0].insertBefore(option, firstGreater);
        else
          select[0].appendChild(option);
      }     

    }

此片段不需要添加库，您可以在 JSBin 上查看现场演示

于 2013-04-18T03:53:45.483 回答
0

转到此链接可能会有所帮助

http://www.electrictoolbox.com/javascript-add-options-html-select/

使用 jQuery 向 <select> 添加选项？

希望能帮助到你

于 2013-04-18T03:42:19.493 回答
0

首先，你有很多语法错误。但是让我们从 HTML 开始。

<form action="" method="POST" name="myform">
    <select name="test_select" id="test_select">
        <option value="1">my val 1</option>
        <option value="3">my val 3</option>
        <option value="4">my val 4</option>
    </select>
    <input type="button" value="test_button" name="test_button" onclick="addItems();">
</form>

为您的选择添加一个 id 属性，以便您能够在您的 javascript 代码中找到该元素。还将 onclick 回调添加到按钮，以便在单击按钮时调用该函数。我将类型从提交更改为按钮以避免重新加载页面。

这是代码：

function addItems() {
    var option = document.createElement("option");

    option.text = "my val 2"
    option.value = 2

    var combo = document.getElementById("test_select");

    var found = false;

    for (var i = 0; i < combo.length; i++) {
        if (parseInt(combo[i].value) > 2) {
            combo.add(option, combo[i]);
            found = true;
            break;
        }
    }

    if(!found) {
        combo.add(option, null);
    }


    return false;
}

组合变量指向您的选择，因此您可以调用 length 来获取当前大小，也可以使用 [] 来获取给定位置的选项。

.add() 函数在作为第二个参数传递的选项之前添加新选项，如下所述：.add()

此代码假定您的选项已预先排序。

了解更多信息：

HTML DOM 选择对象

于 2013-04-18T04:00:55.917 回答