locked
Get Items from DropDownList and Insert into ListBox Using JavaScript RRS feed

  • Question

  • User1655366035 posted

    Hello,

    I have a dropdown list, a button and a listbox.

    In DropDownList I have Generated Some Items. Now when the user Selects a Value from DropDownList and Clicks on Button the selected value from dropdownlist should be inserted into ListBox. and when user double clicks on any item in the listbox the item should be removed. All this i need client side. No server Side postbacks.

    Please tell how can i do this.

    Thanks
     

    Wednesday, January 27, 2010 3:48 AM

Answers

  • User-1071856410 posted

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Test Page</title>
    
        <script type="text/javascript">
               function Button1_onclick()
               {
                    var DropDownList1 = document.getElementById('<% =DropDownList1.ClientID%>');
                    var ListBox1 = document.getElementById('<% =ListBox1.ClientID%>');
                    
                    AddItem( ListBox1,  DropDownList1.options[DropDownList1.selectedIndex].text, DropDownList1.options[DropDownList1.selectedIndex].value );
                    RemoveSelectedItem( DropDownList1 );
                    
               }
               
              function ListBox1_ondblclick()
              {
                    var DropDownList1 = document.getElementById('<% =DropDownList1.ClientID%>');
                    var ListBox1 = document.getElementById('<% =ListBox1.ClientID%>');
                    
                    AddItem( DropDownList1, ListBox1.options[ListBox1.selectedIndex].text, ListBox1.options[ListBox1.selectedIndex].value );
                    RemoveSelectedItem( ListBox1 );
              }
            
               
               function AddItem( ControlObject, ItemText, ItemValue )
               {
                    var optn = document.createElement("OPTION");
                    optn.text = ItemText;
                    optn.value = ItemValue;
                    ControlObject.options.add(optn); 
               }
               
               function RemoveSelectedItem( ControlObject )
               {
                for(i=ControlObject.options.length-1;i>=0;i--)
                {
                    if(ControlObject.options[i].selected)
                    ControlObject.remove(i);
                } 
               }
               
               
               
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
                <asp:ListItem>3</asp:ListItem>
            </asp:DropDownList>
            <input id="Button1" type="button" value="Button" onclick="Button1_onclick();"/>
            <asp:ListBox ID="ListBox1" runat="server" onDblClick ="ListBox1_ondblclick();"></asp:ListBox>
        </form>
    </body>
    </html>


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 27, 2010 5:21 AM

All replies

  • User527778624 posted

     HI

    check this code:

    ------------------------

    1. <html>
        <head>
          <script type="text/javascript">
            
            function changed(){ 
             var me= document.getElementById("sel1")
               var op=new Option(me.value,me.value);
                document.getElementById("sel2").options.add(op);
              }
       
       
              function dblclick(me){
                me.options.remove(me.selectedIndex);  //value);
              }
            </script>
        </head>
        <body>
         <select id="sel1">
      <option value="one">one</option>
      <option value="two">two</option>
      </select>

    <button onclick="changed()">pass it</button>

    <select id="sel2" size="5" ondblclick="dblclick(this)">

    </select>
      </body>
    </html> 

    -------------------------

    Happy Coding.
    Mark as Answer if it helps.

    Wednesday, January 27, 2010 5:13 AM
  • User191633014 posted

    try this:

    <script language="javascript" type="text/javascript">
    function Button1_onclick() {
        var ddl = document.getElementById ('<%= DropDownList1.ClientID %>');
        var lb = document.getElementById ('<%= ListBox1.ClientID %>');
         for (var i = 0; i < ddl.options.length; i++)
          if (ddl.options[ i ].selected)
          {
                var opt = document.createElement("option");
                lb.options.add(opt);
                opt.text = ddl.options[ i ].text;
                opt.value = ddl.options[ i ].value;
          } 
    }
    
    function Delete()
    {
         var lb = document.getElementById ('<%= ListBox1.ClientID %>');
         for (var i = 0; i < lb.options.length; i++)
          if (lb.options[ i ].selected)
                lb.remove(i);
    }
    
    </script>
        <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>item1</asp:ListItem>
                <asp:ListItem>item2</asp:ListItem>
                <asp:ListItem>item3</asp:ListItem>
            </asp:DropDownList>
            
            <asp:ListBox ID="ListBox1" runat="server" ondblclick="Delete()"></asp:ListBox>
            <input id="Button1" type="button" value="button" onclick="Button1_onclick()" /> 


     

    Wednesday, January 27, 2010 5:13 AM
  • User-1071856410 posted

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Test Page</title>
    
        <script type="text/javascript">
               function Button1_onclick()
               {
                    var DropDownList1 = document.getElementById('<% =DropDownList1.ClientID%>');
                    var ListBox1 = document.getElementById('<% =ListBox1.ClientID%>');
                    
                    AddItem( ListBox1,  DropDownList1.options[DropDownList1.selectedIndex].text, DropDownList1.options[DropDownList1.selectedIndex].value );
                    RemoveSelectedItem( DropDownList1 );
                    
               }
               
              function ListBox1_ondblclick()
              {
                    var DropDownList1 = document.getElementById('<% =DropDownList1.ClientID%>');
                    var ListBox1 = document.getElementById('<% =ListBox1.ClientID%>');
                    
                    AddItem( DropDownList1, ListBox1.options[ListBox1.selectedIndex].text, ListBox1.options[ListBox1.selectedIndex].value );
                    RemoveSelectedItem( ListBox1 );
              }
            
               
               function AddItem( ControlObject, ItemText, ItemValue )
               {
                    var optn = document.createElement("OPTION");
                    optn.text = ItemText;
                    optn.value = ItemValue;
                    ControlObject.options.add(optn); 
               }
               
               function RemoveSelectedItem( ControlObject )
               {
                for(i=ControlObject.options.length-1;i>=0;i--)
                {
                    if(ControlObject.options[i].selected)
                    ControlObject.remove(i);
                } 
               }
               
               
               
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
                <asp:ListItem>3</asp:ListItem>
            </asp:DropDownList>
            <input id="Button1" type="button" value="Button" onclick="Button1_onclick();"/>
            <asp:ListBox ID="ListBox1" runat="server" onDblClick ="ListBox1_ondblclick();"></asp:ListBox>
        </form>
    </body>
    </html>


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 27, 2010 5:21 AM
  • User1655366035 posted

    Hello Steelymar,

     

    Thanks for replying.

    I tried ur code but its not filling items into listbox.

    any idea?

     

    my code is here..

    function fill()
    {   
    
       var ddlconSites = document.getElementById ('<%= ddlSitesConnected.ClientID %>');   
        var lstconSites = document.getElementById ('<%= lstConnectedSites.ClientID %>');   
         for (var i = 0; i < ddlconSites.options.length; i++)
         {   
            if (ddlconSites.options[ i ].selected)   
            {   
                var opt = document.createElement("option");   
                   
                lstconSites.text = ddlconSites.options[i].text;   
                lstconSites.value = ddlconSites.options[i].value; 
                lstconSites.options.add(opt);  
            }
         }    
    }   
    
    
    <input id="btnConnectedSites" type="button" value=">>" style="height: 25px; width: 100px" onclick="fill()"  />
                    <asp:ListBox ID="lstConnectedSites" runat="server"></asp:ListBox>


    Wednesday, January 27, 2010 5:42 AM
  • User1655366035 posted

    Thanks muhammedsalimp,

    Its exaclty what i wanted.

     

    Wednesday, January 27, 2010 6:01 AM