开发者

Populate textbox with multiple items from a dropdownlist php or javascript

开发者 https://www.devze.com 2023-03-08 08:47 出处:网络
hi guys i need a little help on my current project. what i want to do is to select multiple data from a dropdownlist and place it on a textbox.. and it will be done whenever the user clicks a data fro

hi guys i need a little help on my current project. what i want to do is to select multiple data from a dropdownlist and place it on a textbox.. and it will be done whenever the user clicks a data from the dropdownlist. TIA! More Power!

.@Hary - Thanks for the help! it really does work. the next thing i would开发者_开发技巧 like to do is to insert into the database everything that were chosen that were moved to List2[] using queries with PHP and Mysql..


Try this:) It works

<html><head>
<script type="text/javascript">
function OnClkAddButtonServer(form)
{
    var selObj = document.getElementById('List1');
     var selObj2 = document.getElementById('List2[]');

      var i;
      var count = selObj2.options.length;

      for (i=0;i<selObj.options.length;i++) 
      {
         if (selObj.options[i].selected) 
         {
               var option = new Option(selObj.options[i].text,selObj.options[i].value);
               option.title = selObj.options[i].text;
               selObj2.options[count] = option;
               count=count+1;
               selObj.options[i] = null;
               i--;
         }
      }
}
function OnClkRemoveButtonServer(form)
{

     var selObj2 = document.getElementById('List1');
     var selObj = document.getElementById('List2[]');

      var i;
      var count = selObj2.options.length;

      for (i=0;i<selObj.options.length;i++) 
      {
         if (selObj.options[i].selected) 
         {
               var option = new Option(selObj.options[i].text,selObj.options[i].value);
               option.title = selObj.options[i].text;
               selObj2.options[count] = option;
               count=count+1;
               selObj.options[i] = null;
               i--;
         }
      }

}
</script>
</head>


 <body>

   <table>
                  <tr>
                  <td >
                    <table >
                    <tr>
                      <td>Available</td></tr>
                    <tr>
                    <td>
                    <select id="List1" name="List1" size="10" multiple="multiple" style="height: 95px;  width: 225px;   border: 1px solid #535881;  background-color: #f9f9f9;" >
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
    <option value="item4">item4</option>
                    </select>
                    </td>
</tr>
</table>
</td>
<td >
<table >
<tr>
                    <td  style="padding:5px">

                   <input name="add_usergroupsleftrightselect" value="Add &gt;" class="FormButton" type="button" onclick='OnClkAddButtonServer(this.form)'><br> 

                    <input name="remove_usergroupsleftrightselect" value="&lt; Remove" class="FormButton" type="button" onclick='OnClkRemoveButtonServer(this.form)'><br>


                    </td>
 </tr>
 </table>
 </td>
 <td >
 <table>
 <tr>
   <td>Selected</td></tr>
 <tr>
                    <td>

                    <select id="List2[]" name="List2[]" size="10" multiple="multiple" style="height: 95px;  width: 225px;   border: 1px solid #535881;  background-color: #f9f9f9;">

    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
    <option value="item4">item4</option>         
                      </select>                     
                    </td>
                    </tr>

                    </table>
                    </td>
                    </tr>
                    </table>

 </body>
</html>


Try this...

<html>
 <body>
   <select multiple="multiple">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
    <option value="item4">item4</option>
  </select>
 </body>
</html>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号