javascript function to add to pulldown menu

Question

Okay, say I have this pulldown menu that looks like this:

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

Just a basic menu. How can I search through and add a value 2 to the menu with a function? I want it to end up looking like this:

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

I tried making a function, to show where I am trying to go with this.

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

How do I make this function work?

score 1 · Accepted Answer · answered Apr 18 '13 at 03:53

I modified your code a bit to make it work

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

    }

This snippet does not need addition library, you can see the live demo here on JSBin

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

Go to this links may helpful

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

Adding options to a <select> using jQuery?

hope it helps

edited May 23 '17 at 11:50

Community

1
1

answered Apr 18 '13 at 03:42

Arunkumar

184
1
1
10

Thanks this looks promising! – Freiermuth Apr 18 '13 at 04:01

score 0 · Answer 3 · answered Apr 18 '13 at 04:00

First off, you have lots of syntax errors. But lets start with the 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>

Add an id attribute to your select so you will be able to find the element on your javascript code. Also add the onclick callback to the button so the function will be called when you click on the button. I changed the type from submit to button to avoid reloading the page.

And here is the code:

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

The combo variable points to your select, so you can call length to get the current size and also use [] to get a option at a given position.

The .add() function adds the new option before the option passed as a 2nd parameter as explained here: .add()

This code assumes that your options are sorted beforehand.

For more information:

HTML DOM Select Object

javascript function to add to pulldown menu

3 Answers3