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

    Join Date
    Oct 2013
    Posts
    1
    Rep Power
    0

    ListBox With optgroup


    Hi Folks,

    I am looking for a javascript which is simple listbox items transfer example but would like to add some optgroups to that.

    Say ListBox1 having OptGroup LOG1, OptGroup LOG2, OptGroup LOG3 and ListBox2 having OptGroup ROG1, OptGroup ROG2, OptGroup ROG3.

    Now, I will have four buttons called '->', '<-', '-->>', '<<--' and their functionality should be like this.

    When click on '->' button,
    Selective ListItems form LOG1 should got to ROG1,
    Selective ListItems form LOG2 should got to ROG2,
    Selective ListItems form LOG3 should got to ROG3.

    Viceversa for '<-'.

    When click on '-->>' button,
    All LOG1, LOG2, LOG3 should go to ROG1, ROG2, ROG3 respectively.

    Viceversa for '-->>'.

    Can anyone please help me here? Thanks in advance!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,151
    Rep Power
    183
    Here is my example of how you would select the first option in each optgroup; by clicking a button:
    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    
    var e = -1;
    
    var opt_group_labels = ["First","Second","Third","Fourth"];
    
    $("document").ready(function(){
    
    var total = opt_group_labels.length - 1;
    
       $("#next").click(function(){
        e++;
         if (e > total){
          e = 0;
         }
          $("select").val($("select optgroup[label='"+opt_group_labels[e]+"'] option:first-child").val());
       });
    
       $("#prev").click(function(){
        e--;
         if (e < 0){
          e = total;
         }
          $("select").val($("select optgroup[label='"+opt_group_labels[e]+"'] option:first-child").val());
       });
    
    });
    
    </script>
    
    
    <select>
    <option selected>Select Your Choice</option>
    <optgroup label="First">
    <option>A-1</option>
    <option>B-1</option>
    <option>C-1</option>
    </optgroup>
    <optgroup label="Second">
    <option>A-2</option>
    <option>B-2</option>
    <option>C-2</option>
    <option>D-2</option>
    </optgroup>
    <optgroup label="Third">
    <option>A-3</option>
    <option>B-3</option>
    </optgroup>
    <optgroup label="Fourth">
    <option>A-4</option>
    <option>B-4</option>
    <option>C-4</option>
    <option>D-4</option>
    <option>E-4</option>
    </optgroup>
    </select>
    
    <br/>
    <br/>
    
    <button id="prev"><<</button>
    <button id="next">>></button>
    And... here is my example of how you would go through each of the options in the select menu; by clicking a button:
    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    
    var e = 0;
    
    $("document").ready(function(){
    
    var total = $("select option").length;
    
       $("#next").click(function(){
        e++;
         if (e >= total){
          e = 1;
         }
          $("select").val($("option").eq(e).val());
       });
    
       $("#prev").click(function(){
        e--;
         if (e < 1){
          e = total - 1;
         }
          $("select").val($("option").eq(e).val());
       });
    
    });
    
    </script>
    
    
    <select>
    <option selected>Select Your Choice</option>
    <optgroup label="First">
    <option>A-1</option>
    <option>B-1</option>
    <option>C-1</option>
    </optgroup>
    <optgroup label="Second">
    <option>A-2</option>
    <option>B-2</option>
    </optgroup>
    </select>
    
    <br/>
    <br/>
    
    <button id="prev"><</button>
    <button id="next">></button>
    I will let you combine them, but this should give you the basic concept of how to do..., what your wanting to do; you just have the put it all together.

    Good Luck

IMN logo majestic logo threadwatch logo seochat tools logo