Question

好的，我说这个下拉菜单看起来像这样：

  <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>

如何使此功能起作用？

Answer 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);
      }     

    }

此代码段不需要添加库，您可以在此处查看实时演示on JSBin

Answer 2

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

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

Adding options to a <select> using jQuery?

希望有所帮助

Answer 3

首先，你有很多语法错误。但是让我们从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 Select Object

javascript函数添加到下拉菜单

3 个答案: