daily pastebin goal
3%
SHARE
TWEET

Untitled

a guest May 16th, 2018 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <select id="theOptions1">
  2.   <option value="1">1</option>
  3.   <option value="2">2</option>
  4.   <option value="3">3</option>
  5. </select>
  6.    
  7. <select id="theOptions2">
  8.   <option value="a">a</option>
  9.   <option value="b">b</option>
  10.   <option value="c">c</option>
  11. </select>
  12.    
  13. <select id="theOptions2">
  14.   <option value="a">a</option>
  15.   <option value="b">b</option>
  16. </select>
  17.    
  18. <select id="theOptions2">
  19.   <option value="b">b</option>
  20.   <option value="c">c</option>
  21. </select>
  22.    
  23. jQuery.fn.filterOn = function(radio, values) {
  24.     return this.each(function() {
  25.         var select = this;
  26.         var options = [];
  27.         $(select).find('option').each(function() {
  28.             options.push({value: $(this).val(), text: $(this).text()});
  29.         });
  30.         $(select).data('options', options);
  31.         $(radio).click(function() {
  32.             var options = $(select).empty().data('options');
  33.             var haystack = values[$(this).attr('id')];
  34.             $.each(options, function(i) {
  35.                 var option = options[i];
  36.                 if($.inArray(option.value, haystack) !== -1) {
  37.                     $(select).append(
  38.                     $('<option>').text(option.text).val(option.value)
  39.                     );
  40.                 }
  41.             });
  42.         });            
  43.     });
  44. };
  45.    
  46. $(document).ready(function() {
  47.     //copy the second select, so we can easily reset it
  48.     var selectClone = $('#theOptions2').clone();
  49.     $('#theOptions1').change(function() {
  50.         var val = parseInt($(this).val());
  51.         //reset the second select on each change
  52.         $('#theOptions2').html(selectClone.html())
  53.         switch(val) {
  54.             //if 2 is selected remove C
  55.             case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
  56.             //if 3 is selected remove A
  57.             case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
  58.         }
  59.     });
  60. });
  61.    
  62. <select id="theOptions1">
  63.   <option value="1">1</option>
  64.   <option value="2">2</option>
  65.   <option value="3">3</option>
  66. </select>
  67. <br />
  68. <select id="theOptions2">
  69.   <option value="a">a</option>
  70.   <option value="b">b</option>
  71.   <option value="c">c</option>
  72. </select>
  73.    
  74. <select id="theOptions2">
  75.   <option value="a" class="option-1 option-2">a</option>
  76.   <option value="b" class="option-1 option-2 option-3">b</option>
  77.   <option value="c" class="option-1 option-3">c</option>
  78. </select>
  79.    
  80. $(function() {
  81.     var allOptions = $('#theOptions2 option').clone();
  82.     $('#theOptions1').change(function() {
  83.         var val = $(this).val();
  84.         $('#theOptions2').html(allOptions.filter('.option-' + val));
  85.     });
  86. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top