筛选选择下拉框选项

我想筛选一些下拉选择对方的对话框，但我得到一些奇怪的行为与选项之一。筛选选择下拉框选项

这是jQuery的我使用：

$(document).ready(function() { 
$('select:gt(0)').find('option:gt(0)').hide().prop('disabled', true); 

$('#C5R').change(function() { 
    $('select:gt(0)').find('option:gt(0)').hide(); 
    var thisVal = $(this).val(); 
    if (thisVal == 1) { 
     $('#C5T').find('option').each(function() { 
      var thisVal = $(this).val(); 
      $(this).hide().prop('disabled', true);; 
      if ((thisVal >= 1) && (thisVal <= 11)) { 
       $(this).show().prop('disabled', false);; 
      } 
     }); 
    } else if (thisVal == 2) { 
     $('#C5T').find('option').each(function() { 
      var thisVal = $(this).val(); 
      $(this).hide().prop('disabled', true);; 
      if ((thisVal >= 12) && (thisVal <= 32)) { 
       $(this).show().prop('disabled', false);; 
      } 
     }); 
    } else if (thisVal == 3) { 
     $('#C5T').find('option').each(function() { 
      var thisVal = $(this).val(); 
      $(this).hide().prop('disabled', true);; 
      if ((thisVal >= 33) && (thisVal <= 51)) { 
       $(this).show().prop('disabled', false);; 
      } 
     }); 
    } 
}); 
});

理论上它工作正常，第二个下拉过滤第一个（我没有到编程过滤在第三届，所以请忽略它），但是当选择Essex（第三选项）时，选项在第二个下拉菜单中不能正确显示。实际下拉框无法正确呈现（在Chrome中，未在其他浏览器中测试过）。

有没有人有解决方案/解决这个问题？

来源

2014-01-06 user2121189

jsfiddle实际上对我来说很好（OSX上的Chrome）。你使用的是什么版本的Chrome和操作系统？ –

Chrome 31.0.1650.63 m和win 7 – user2121189

我刚刚意识到您正试图隐藏选择选项，据我所知这是不可能的（至少不是在Chrome中）。看到[这个问题]（http://stackoverflow.com/questions/4398966/how-can-i-hide-select-options-with-javascript-cross-browser）了解更多信息 –

一种方式来做到这一点是有一个隐藏的select有所有的选项，你只在你需要change

DEMO

HTML

<select name="C5T" size="1" id="C5T" onchange="{C5TSelectChange(); onBlurUpdate(this)}" class="fontSize"></select> 
<select id="C5Thidden" style="display:none"> 
    <option class="fontSize"></option> 
    <option value="1" class="fontSize">Dereham</option> 
    <option value="2" class="fontSize">East Dereham</option> 
    ... 
    <option value="51" class="fontSize">Witham</option> 
</select>

的那些复制jQuery

$(document).ready(function() { 
    $('#C5R').change(function() { 
     var thisVal = $(this).val(); 
     $C5T = $('#C5T'); 
     $C5T.empty(); 
     $options = $('option', '#C5Thidden'); 
     if (thisVal == 1) { 
      filteredOptions = $options.slice(1, 12).clone(); 
      $C5T.append(filteredOptions); 
     } else if (thisVal == 2) { 
      filteredOptions = $options.slice(12, 33).clone(); 
      $C5T.append(filteredOptions); 
     } else if (thisVal == 3) { 
      filteredOptions = $options.slice(33).clone(); 
      $C5T.append(filteredOptions); 
     } 
    }); 
});

来源

2014-01-06 22:26:21 kei

筛选选择下拉框选项

回答

相关问题