Don't like ads? PRO users don't see any ads ;-)
Guest

Add/remove select list items

By: a guest on Jun 11th, 2012  |  syntax: HTML  |  size: 1.59 KB  |  hits: 26  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html>
  2.         <head>
  3.                 <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  4.                 <title>Js Tests</title>
  5.         </head>
  6.         <body>
  7.                 <fieldset>
  8.                         <legend>Pergunta 1</legend>
  9.                         <input type="radio" name="answer[1]" value="1" /> Test 1
  10.                         <input type="radio" name="answer[1]" value="2" /> Test 2
  11.                         <input type="radio" name="answer[1]" value="3" /> Test 3
  12.                         <input type="radio" name="answer[1]" value="4" /> Test 4
  13.                 </fieldset>
  14.  
  15.                 <fieldset>
  16.                         <legend>Pergunta 2</legend>
  17.                         <input type="checkbox" name="answer[2]" value="1" /> Test 1
  18.                         <input type="checkbox" name="answer[2]" value="2" /> Test 2
  19.                         <input type="checkbox" name="answer[2]" value="3" /> Test 3
  20.                         <input type="checkbox" name="answer[2]" value="4" /> Test 4
  21.                 </fieldset>
  22.  
  23.                 <fieldset>
  24.                         <legend>Select-list</legend>
  25.                         <select name="select-test" id="our-select">
  26.                                 <option value="0">No value</option>
  27.                         </select>
  28.                 </fieldset>
  29.  
  30.                 <script type="text/javascript">
  31.                         (function($){
  32.                                 $(':radio, :checkbox').on('click', function(){
  33.                                         var $this = $(this), value = $this.val(), label = $this.attr('name') + value;
  34.                                
  35.                                         var add = function(){
  36.                                                 var option = ['<option value="', value, '">', label, '</option>'];
  37.                                                 $('#our-select').append(option.join(''));
  38.                                         };
  39.  
  40.                                         var remove = function(){
  41.                                                 var option = $('#our-select').find('option[value="' + value + '"]');
  42.                                                 if(typeof option !== 'undefined'){
  43.                                                         option.remove();
  44.                                                 }
  45.                                         };
  46.  
  47.                                         $this.is(':checked')? add() : remove();
  48.  
  49.                                 });
  50.                         })(jQuery);
  51.                 </script>
  52.         </body>
  53. </html>