CODEWITHSUNDEEP
javascriptdrop-down-menuinsert
Freiermuth
Freiermuth

Reputation: 121

javascript function to add to pulldown menu

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?

Upvotes: 0

Views: 1124

Answers (3)

vdeantoni
vdeantoni

Reputation: 1968

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

Upvotes: 0

Hieu Le
Hieu Le

Reputation: 8415

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

Upvotes: 1

Arunkumar
Arunkumar

Reputation: 194

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

Upvotes: 0

Related Questions