#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0

    Adding dropdown list on a cell


    I have a dropdown list on each cell of table row. Now what I need is dynamically add more dropdownlist on a particular cells with pressing the add button. Any code snippet to help on this? Thank you.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    Code:
    <script>
    
    function addList(cellID,ddlistVal,ddlistTxt)
    {
    
    // get option parameters
    
    var optionVal = ddlistVal.split(",");
    var optionText = ddlistTxt.split(",");
    
    // define select list
    
    var sel = document.createElement("select");
    
    // add list
    
    document.getElementById(cellID).appendChild(sel);
    
    // selected option
    
    var optSEL = document.createElement("option");
    var optsel = document.createTextNode(optionText[0]);
    optSEL.setAttribute("value","");
    
     for (i=0;i<=optionText.length-1;i++) {
    
    // add options
    
     var opts = document.createElement("option");
     var optsVal = document.createTextNode(optionText[i]);
     opts.setAttribute("value",optionVal[i-1]);
    
    // add options
    
      if (i != 0) {
       document.getElementById(cellID).getElementsByTagName("select")[0].appendChild(opts);
       document.getElementById(cellID).getElementsByTagName("option")[i].appendChild(optsVal);
      }
      else {
       document.getElementById(cellID).getElementsByTagName("select")[0].appendChild(optSEL);
       document.getElementById(cellID).getElementsByTagName("option")[0].appendChild(optsel);
      }
    
    }
    
    // select initial option
    
    document.getElementById(cellID).getElementsByTagName("option")[0].setAttribute("selected","selected");
    
    }
    
    </script>
    
    <table>
    <tr>
    <td id="td1">
    <!-- add another dropdown list to this cell -->
    </td>
    </table>
    
    <input type="button" value="Add" onclick="javascript:addList('td1','Option A,Option B,Option C','Select An Option,Option 1,Option 2,Option 3')"/>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0
    Dear Loone,
    Thank you and will try out your solution even thought I managed some other solution too.

    Originally Posted by web_loone08
    Code:
    <script>
    
    function addList(cellID,ddlistVal,ddlistTxt)
    {
    
    // get option parameters
    
    var optionVal = ddlistVal.split(",");
    var optionText = ddlistTxt.split(",");
    
    // define select list
    
    var sel = document.createElement("select");
    
    // add list
    
    document.getElementById(cellID).appendChild(sel);
    
    // selected option
    
    var optSEL = document.createElement("option");
    var optsel = document.createTextNode(optionText[0]);
    optSEL.setAttribute("value","");
    
     for (i=0;i<=optionText.length-1;i++) {
    
    // add options
    
     var opts = document.createElement("option");
     var optsVal = document.createTextNode(optionText[i]);
     opts.setAttribute("value",optionVal[i-1]);
    
    // add options
    
      if (i != 0) {
       document.getElementById(cellID).getElementsByTagName("select")[0].appendChild(opts);
       document.getElementById(cellID).getElementsByTagName("option")[i].appendChild(optsVal);
      }
      else {
       document.getElementById(cellID).getElementsByTagName("select")[0].appendChild(optSEL);
       document.getElementById(cellID).getElementsByTagName("option")[0].appendChild(optsel);
      }
    
    }
    
    // select initial option
    
    document.getElementById(cellID).getElementsByTagName("option")[0].setAttribute("selected","selected");
    
    }
    
    </script>
    
    <table>
    <tr>
    <td id="td1">
    <!-- add another dropdown list to this cell -->
    </td>
    </table>
    
    <input type="button" value="Add" onclick="javascript:addList('td1','Option A,Option B,Option C','Select An Option,Option 1,Option 2,Option 3')"/>
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    Cool, glad you got something to work out for you.

IMN logo majestic logo threadwatch logo seochat tools logo