Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Select all drop down function?

    Hi, is there a way, when one select is clicked, all change to the value of the one that was chosen? (ie: "b" is clicked and all change to b.)

    Code:
    <select>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    </select>
    <br>
    
    <select>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    </select>
    <br>
    
    <select>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    </select>
    Thanks

  • #2
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Try this out.

    Code:
    <!DOCTPYE html>
    <html>
    <head>
      <title>Untitled Document</title>
      <script type="text/javascript">
      (function($){
        $.selectAll = function(o,i) {
          var j,
              c = document.getElementById(o),
              s = (c !== undefined)?c.getElementsByTagName('select'):false;
          if(s) {
            for(j=0;j<s.length;j++) {
              s[j].options[i].selected = true;
            }
          }
        };
      })(window);
      </script>
    </head>
    <body>
    <div id="selectBoxes">
      <select onchange="selectAll('selectBoxes',this.selectedIndex);">
        <option>a</option>
        <option>b</option>
        <option>c</option>
      </select>
      <br>
      <select onchange="selectAll('selectBoxes',this.selectedIndex);">
        <option>a</option>
        <option>b</option>
        <option>c</option>
      </select>
      <br>
      <select onchange="selectAll('selectBoxes',this.selectedIndex);">
        <option>a</option>
        <option>b</option>
        <option>c</option>
      </select>
    </div>
    </body>
    </html>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    God bless you! Thanks

  • #4
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    This one is more easier as you don't need a wrapping div.

    Code:
    <!DOCTPYE html>
    <html>
    <head>
      <title>Untitled Document</title>
      <script type="text/javascript">
      (function($){
        $.selectAll = function(o,i) {
          var p,k,j,s = document.getElementsByTagName('select');
          if(s) {
            for(j=0;j<s.length;j++) {
              p = s[j].className.split(' ');
              for(k=0;k<p.length;k++) {
                if(p[k] == o) {
                  s[j].options[i].selected = true;
                }
              }
            }
          }
        };
      })(window);
      </script>
    </head>
    <body>
    <select class="multiSwitch" onchange="selectAll('multiSwitch',this.selectedIndex);">
      <option>a</option>
      <option>b</option>
      <option>c</option>
    </select>
    <br>
    <select class="multiSwitch" onchange="selectAll('multiSwitch',this.selectedIndex);">
      <option>a</option>
      <option>b</option>
      <option>c</option>
    </select>
    <br>
    <select class="multiSwitch" onchange="selectAll('multiSwitch',this.selectedIndex);">
      <option>a</option>
      <option>b</option>
      <option>c</option>
    </select>
    </body>
    </html>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,303
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Your select options do not have a a value (in IE). Here is how you can change the option text, although why you would wish to do so is unclear to me.

    Code:
    <select id = "sel1" onchange = "go()">
    <option>a</option>
    <option>b</option>
    <option>c</option>
    </select>
    
    <select id = "sel2">
    <option>a</option>
    <option>b</option>
    <option>c</option>
    </select>
    
    <script type = "text/javascript">
    function go() {
    var si1= document.getElementById("sel1"). selectedIndex;
    var txt1 = document.getElementById("sel1").options[si1].text; 
    var len = document.getElementById("sel2").length;
    for (var i = 0; i<document.getElementById("sel2").length; i++){
    document.getElementById("sel2").options[i].text = txt1; 
    }
    }
    
    </script>

    "When you've got a mountain to climb, you may as well throw everything into the kitchen sink straight away." - Football commentator

  • #6
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh cool, thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •