篩選選擇下拉框選項

我想篩選一些下拉選擇對方的對話框，但我得到一些奇怪的行爲與選項之一。篩選選擇下拉框選項

這是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

篩選選擇下拉框選項

回答

相關問題