CODEWITHSUNDEEP
javascriptphphtmlsqldynamically-generated
Logan Wayne
Logan Wayne

Reputation: 5991

Dynamically add drop down list

I can dynamically add text boxes like this:

<html>
<body>

<div id='item'></div>

<input name='add' type='button' id='add' value='Add Item'/>

</body>
</html>

<script type="text/javascript">

var item = document.getElementById('item');

var stopper=0;

document.getElementById('add').onclick = function () {

stopper=stopper+1;

  var input = document.createElement('input'),
      div = document.createElement('div');
  input.type = "text";
  input.setAttribute("name", "item[]");
  input.setAttribute("class", "item");

  div.appendChild(input);
  //...

  item.appendChild(div);

};
</script>

JS Fiddle

How can I do this? Instead of text box, I want to dynamically generate a drop down (<select>). And the option of the drop down would be coming from my SQL database.

Upvotes: 2

Views: 12407

Answers (3)

Dinushika Rathnayake
Dinushika Rathnayake

Reputation: 419

This link will be helpful. How to dynamically create a drop-down list with JavaScript and jQuery Also you can try this way.

function addItemToList(){
        //create label for the dropdown
        var label = document.createElement("label");
        label.innerHTML = "Select an Item: "

        //dropdown values
        var valuerArray = ["V1", "V2", "V3", "V4"];
        var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];

        //create dropdown
        var select = document.createElement("select");
        select.name = "dropdownName";
        select.id = "dropdownId"

        //dropdown items
        for (var i = 0; i < valuerArray.length; i++) {
            var option = document.createElement("option");
            option.value = valuerArray[i];
            option.text = textArray[i];
            select.appendChild(option);
        }

        //add label and dropdown to HTML containers
        document.getElementById("labelContainer").appendChild(label);
        document.getElementById("itemContainer").appendChild(select);
    }
<HTML>
 <body>
  <table>
   <tr>
    <td><div id="labelContainer"></div></td>
    <td><div id="itemContainer"></div></td>
    <td><input name='add' type='button' id='add' value='Add Item' onclick='addItemToList()' /></div></td>
   </tr>
  </table>
 </body>
</html>

Upvotes: -1

CBHacking
CBHacking

Reputation: 2122

Replace createElement('input') with createElement('select') and then create additional option elements the same way: var opt1 = document.createElement('option') and Set the attributes (value that goes to the server and text that the user sees, usually) on each element. Then append each option object to your select object, and append the select object into the DOM as you are doing with your input object now.

Here's an example using an array of animals, and sending the first letter as the value to the server:

var items = ['aardvark', 'bear', 'cat', 'donkey'];
var values = ['a', 'b', 'c', 'd'];
var sel = document.createElement('select');
sel.setAttribute('name', 'item[]');
for (var i = 0; i < 4; i++) {
    var opt = document.createElement('option');
    opt.setAttribute('text', items[i]);
    opt.setAttribute('value', values[i]);
    sel.appendChild(opt);
}
// ... from here on, set any other attributes, like classes
// Then and add the select object to the DOM:
item.appendChild(sel);

Upvotes: 3

Noki Flores
Noki Flores

Reputation: 257

Hi please try this code.

        <html>
    <body>

    <div id='item'></div>

    <input name='add' type='button' id='add' value='Add Item'/>

    </body>
    </html>

    <script type="text/javascript">
        var item = document.getElementById('item');

        var stopper=0;

        document.getElementById('add').onclick = function () {

        stopper=stopper+1;

         var select = document.createElement('select'),
              div = document.createElement('div');

          select.setAttribute("name", "item[]");
          select.setAttribute("class", "item");
            //this is just an example. You need to replace this code with ajax that is fetching 
//from the Database.. and please use jquery it makes your work easier.
            var  count = getRandomInt(1, 5);
            for(var a=1; a<=count; a++) {
                var option = document.createElement('option');
                 var t =  randon_val();
            //end
              option.setAttribute("value",t);
              option.appendChild(document.createTextNode(t));
                select.appendChild(option);
            }



          div.appendChild(select);
          item.appendChild(div);

        };

        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function randon_val()
        {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

            for( var i=0; i < 5; i++ )
                text += possible.charAt(Math.floor(Math.random() * possible.length));

            return text;
        }
    </script>

Upvotes: 1

Related Questions