Jquery只显示数组

Question

我有一个数组，其中包含属于另一个选择的选择值，所以当第一个选择被更改时，只有必须显示数组中的选择。

因此，当第一个选择是＆＃34; Vakantie en recreatie＆＃34;时，只有值＆＃39; 1,2,13,14,15,16,17,18,19,20,21,22 ，23,24,25,64,65＆＃39;在rubriek select中必须显示

数组：

var caterub = {
    1: '1,2,13,14,15,16,17,18,19,20,21,22,23,24,25,64,65',
    3: '5,6,53,54,55,56,57,58,59,166',
    4: '26,27,28,29,30,31,32,33,34,35',
    6: '36,37,38,39,40,41,42,43,44,45,63',
    7: '46,47,48,49,50,51,52,60,61,62',
    8: '107,108,109,110,111,112,113,114',
    9: '70,71,72,73,74,75,76,77,78,83,84,85,86,87,88,89,90,91,92',
    10: '118,119,120,121,122,123,124,125,126,127,128,129,130,136,137,138,139,140',
    11: '93,94,98,99,100,101,102,103,104,105,106',
    12: '164,165,167,168,169',
    13: '141,142,143,144,145,146,147,148,149,150',
    14: '154,155,156,157,158,159,160,161,162,163'
};

选择：

<select name="categorie" id="categorie"><option value="">Kies een categorie...</option>
<option value="1">Vakantie en recreatie</option>
<option value="3">Bedrijfs en opslagruimte</option>
<option value="4">Auto&#039;s en personenvervoer</option>
<option value="6">Motoren en tweewielers</option>
<option value="7">Woningen en woonruimte</option>
<option value="8">Beeld, licht en geluid</option>
<option value="9">Bouw en verbouw</option>
<option value="10">Feesten en evenementen</option>
<option value="11">Tuinonderhoud</option>
<option value="12">Vervoer en logistiek</option>
<option value="13">Watersport en boten</option>
<option value="14">Diensten en vakmensen</option>
</select>

<select name="rubriek" id="rubriek">
<option value="">Kies eerst een categorie...</option>
<option value="1">Stacaravans</option>
<option value="2">Bungalows</option>
<option value="5">Kantoorruimte</option>
<option value="6">Winkelruimte</option>
<option value="13">Chalets</option>
<option value="14">Huisjes</option>
<option value="15">Villa&#039;s</option>
<option value="16">Groepsverblijven</option>
<option value="17">Appartementen</option>
<option value="18">Tenten</option>
<option value="19">Campers</option>
<option value="20">Hostels</option>
<option value="21">Bed and breakfast</option>
<option value="22">Hotelkamers</option>
<option value="23">Vouwwagens</option>
<option value="24">Caravans</option>
<option value="25">Overig vakantie en recreatie</option>
<option value="26">Autobussen</option>
<option value="27">Personenbusjes</option>
<option value="28">Personenauto&#039;s | Compact</option>
<option value="29">Personenauto&#039;s | Middenklasse</option>
<option value="30">Personenauto&#039;s | Groot</option>
<option value="31">Cabrio&#039;s</option>
<option value="32">Limousines</option>
<option value="33">Old-timers</option>
<option value="34">Trouwauto&#039;s</option>
<option value="35">Overig auto&#039;s en personenvervoer</option>
<option value="36">Motoren | Sportief</option>
<option value="37">Motoren | Touring</option>
<option value="38">Motoren | All Road</option>
<option value="39">Motoren | Choppers</option>
<option value="40">Motoren | Zijspan</option>
<option value="41">Fietsen</option>
<option value="42">Scooters</option>
<option value="43">Brommers</option>
<option value="44">Snorfietsen en elektrische fietsen</option>
<option value="45">Overig motoren en tweewielers</option>
<option value="46">Studentenkamers</option>
<option value="47">Appartementen</option>
<option value="48">Eengezinswoningen</option>
<option value="49">Studio</option>
<option value="50">Flat | hoogbouw</option>
<option value="51">Bovenwoning</option>
<option value="52">Overig woningen en woonruimte</option>
<option value="53">Keten</option>
<option value="54">Containers</option>
<option value="55">Opslagruimte</option>
<option value="56">Kantoorinventaris</option>
<option value="57">Productieruimte</option>
<option value="58">Praktijkruimte</option>
<option value="59">Overig bedrijfs en opslagruimte</option>
<option value="60">Woonhuis</option>
<option value="61">Woonunits en keten</option>
<option value="62">Inventaris en woninginrichting</option>
<option value="63">Motoren | Harley Davidson</option>
<option value="64">Arrangementen</option>
<option value="65">Campings</option>
<option value="70">Hijskranen en kraanbenodigdheden</option>
<option value="71">Steigers, trappen en liften</option>
<option value="72">Zagen, zaagmachines en haakse slijpers</option>
<option value="73">Overig bouw en verbouw</option>
<option value="74">Hoogwerkers</option>
<option value="75">Aggregaten, compressoren en pompen</option>
<option value="76">Boren en breken</option>
<option value="77">Bouwverlichting</option>
<option value="78">Schaftwagens en keten</option>
<option value="83">Sanitair en mobiele toiletten</option>
<option value="84">Opslag en afvalcontainers</option>
<option value="85">Hekken en afrastering</option>
<option value="86">Betonmolens en betonverwerking</option>
<option value="87">Verreikers en heftrucks</option>
<option value="88">Veiligiheidsmateriaal en PBM&#039;s</option>
<option value="89">Lasapparatuur</option>
<option value="90">Hogedruk reinigers en schoonmaak</option>
<option value="91">Elektrisch handgereedschap</option>
<option value="92">Gereedschap algemeen</option>
<option value="93">Graafmachines en shovels</option>
<option value="94">Trilplaten</option>
<option value="98">Grasmaaiers en strimmers</option>
<option value="99">Bladblazers en zuigers</option>
<option value="100">Grondboren en frezen</option>
<option value="101">Kettingzagen, handzagen en scharen</option>
<option value="102">overig tuinonderhoud</option>
<option value="103">Kloofmachines en bijlen</option>
<option value="104">Kruiwagens, scheppen en spades</option>
<option value="105">Houtversnipperaars</option>
<option value="106">Schoffels en harken</option>
<option value="107">Mengpanelen en microfoons</option>
<option value="108">Film en diaprojectors</option>
<option value="109">Overig beeld, licht en geluid</option>
<option value="110">Beamers en bigscreens</option>
<option value="111">Foto en videocamera&#039;s</option>
<option value="112">Versterkers en boxen</option>
<option value="113">Flatscreens en TV&#039;s</option>
<option value="114">Verlichting en stoboscopen</option>
<option value="118">Feestkleding</option>
<option value="119">Mobiele toiletten en sanitair</option>
<option value="120">Vloeren en tapijt</option>
<option value="121">Afrastering en hekken</option>
<option value="122">Geboorte en jubilea</option>
<option value="123">Podia en podiumwagens</option>
<option value="124">Zalen en feestlocaties</option>
<option value="125">Overig feesten en evenementen</option>
<option value="126">Attracties, springkussens en spellen</option>
<option value="127">Feesttenten</option>
<option value="128">Stands en marktkramen</option>
<option value="129">Tapinstallaties en barren</option>
<option value="130">Tribunes</option>
<option value="136">Stoelen, tafels en barkrukken</option>
<option value="137">Kookapparatuur en barbeques</option>
<option value="138">Opslag en afvalcontainers </option>
<option value="139">Koffie, thee en servies</option>
<option value="140">Koel- en warmhoudapparatuur</option>
<option value="141">Zeilboten en catamarans</option>
<option value="142">Rondvaartboten</option>
<option value="143">Sloepen en motorbootjes</option>
<option value="144">Kano&#039;s en Kajakken</option>
<option value="145">Boottrailers</option>
<option value="146">Waterfietsen en jetski&#039;s</option>
<option value="147">Kruisers en luxe jachten</option>
<option value="148">Ligplaatsen</option>
<option value="149">Surfen en kiten</option>
<option value="150">Overig watersport en boten</option>
<option value="154">Aannemers</option>
<option value="155">Installateurs</option>
<option value="156">Schilders</option>
<option value="157">Tuinarchitecten</option>
<option value="158">Stratenmakers</option>
<option value="159">Hoveniers</option>
<option value="160">Bands en artiesten</option>
<option value="161">DJ&#039;s</option>
<option value="162">Catering</option>
<option value="163">Stucadoors</option>
<option value="164">Vrachtwagens</option>
<option value="165">Verhuisbusjes</option>
<option value="166">Garageboxen</option>
<option value="167">Aanhangwagens</option>
<option value="168">Bestelwagens</option>
<option value="169">Opleggers en dieplader</option>
</select>

到目前为止Jquery：

    $("#categorie").change(function(){
    //Welke categorie is er gekozen
        var selectedValue = $(this).val();
        //rubriekskeuze veld geheel verbergen, opnieuw samenstellen (verbergen opties die niet bij categorie horen)
        $('#rubriek').hide("slow", function(){
            if(selectedValue){
                var getOptions = caterub[selectedValue];
 ???           
                $('#rubriek').hide().fadeIn('slow');
        }
        $('#rubriek').fadeIn('slow');    
        });
    });

Answer 1

我选择了一个简短的示例，展示了如何将选项替换为您想要的选项。我做了替换而不是隐藏选项，因为我认为IE在尝试隐藏选项方面存在问题。

＆＃13;

＆＃13;

//put it in an doc ready just for the sake of having a closure to scope variables down
$(function() {
  var caterub = {
    1: '1,2,13,14,15,16,17,18,19,20,21,22,23,24,25,64,65',
    3: '5,6,53,54,55,56,57,58,59,166',
    4: '26,27,28,29,30,31,32,33,34,35',
    6: '36,37,38,39,40,41,42,43,44,45,63',
    7: '46,47,48,49,50,51,52,60,61,62',
    8: '107,108,109,110,111,112,113,114',
    9: '70,71,72,73,74,75,76,77,78,83,84,85,86,87,88,89,90,91,92',
    10: '118,119,120,121,122,123,124,125,126,127,128,129,130,136,137,138,139,140',
    11: '93,94,98,99,100,101,102,103,104,105,106',
    12: '164,165,167,168,169',
    13: '141,142,143,144,145,146,147,148,149,150',
    14: '154,155,156,157,158,159,160,161,162,163'
  };
  var $categories = $('#categorie');
  var $rubriek = $('#rubriek');
  var $rubriekOptions = $rubriek.find('option');
  
  $categories.on('change', function(e){
    //change the values to an array so we can index on them
    var valuesToShow = caterub[e.target.value].split(',');
    //get the options with a value in the array
    var $filteredOptions = $rubriekOptions.filter(function(){
      return valuesToShow.indexOf(this.value) > -1;
    });
    //replace the options with just the options we want
    $rubriek.empty().append($filteredOptions);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="categorie" id="categorie"><option value="">Kies een categorie...</option>
<option value="1">Vakantie en recreatie</option>
<option value="3">Bedrijfs en opslagruimte</option>
<option value="4">Auto&#039;s en personenvervoer</option>
<option value="6">Motoren en tweewielers</option>
<option value="7">Woningen en woonruimte</option>
<option value="8">Beeld, licht en geluid</option>
<option value="9">Bouw en verbouw</option>
<option value="10">Feesten en evenementen</option>
<option value="11">Tuinonderhoud</option>
<option value="12">Vervoer en logistiek</option>
<option value="13">Watersport en boten</option>
<option value="14">Diensten en vakmensen</option>
</select>

<select name="rubriek" id="rubriek">
<option value="">Kies eerst een categorie...</option>
<option value="1">Stacaravans</option>
<option value="2">Bungalows</option>
<option value="5">Kantoorruimte</option>
<option value="6">Winkelruimte</option>
<option value="13">Chalets</option>
<option value="14">Huisjes</option>
<option value="15">Villa&#039;s</option>
<option value="16">Groepsverblijven</option>
<option value="17">Appartementen</option>
<option value="18">Tenten</option>
<option value="19">Campers</option>
<option value="20">Hostels</option>
<option value="21">Bed and breakfast</option>
<option value="22">Hotelkamers</option>
<option value="23">Vouwwagens</option>
<option value="24">Caravans</option>
<option value="25">Overig vakantie en recreatie</option>
<option value="26">Autobussen</option>
<option value="27">Personenbusjes</option>
<option value="28">Personenauto&#039;s | Compact</option>
<option value="29">Personenauto&#039;s | Middenklasse</option>
<option value="30">Personenauto&#039;s | Groot</option>
<option value="31">Cabrio&#039;s</option>
<option value="32">Limousines</option>
<option value="33">Old-timers</option>
<option value="34">Trouwauto&#039;s</option>
<option value="35">Overig auto&#039;s en personenvervoer</option>
<option value="36">Motoren | Sportief</option>
<option value="37">Motoren | Touring</option>
<option value="38">Motoren | All Road</option>
<option value="39">Motoren | Choppers</option>
<option value="40">Motoren | Zijspan</option>
<option value="41">Fietsen</option>
<option value="42">Scooters</option>
<option value="43">Brommers</option>
<option value="44">Snorfietsen en elektrische fietsen</option>
<option value="45">Overig motoren en tweewielers</option>
<option value="46">Studentenkamers</option>
<option value="47">Appartementen</option>
<option value="48">Eengezinswoningen</option>
<option value="49">Studio</option>
<option value="50">Flat | hoogbouw</option>
<option value="51">Bovenwoning</option>
<option value="52">Overig woningen en woonruimte</option>
<option value="53">Keten</option>
<option value="54">Containers</option>
<option value="55">Opslagruimte</option>
<option value="56">Kantoorinventaris</option>
<option value="57">Productieruimte</option>
<option value="58">Praktijkruimte</option>
<option value="59">Overig bedrijfs en opslagruimte</option>
<option value="60">Woonhuis</option>
<option value="61">Woonunits en keten</option>
<option value="62">Inventaris en woninginrichting</option>
<option value="63">Motoren | Harley Davidson</option>
<option value="64">Arrangementen</option>
<option value="65">Campings</option>
<option value="70">Hijskranen en kraanbenodigdheden</option>
<option value="71">Steigers, trappen en liften</option>
<option value="72">Zagen, zaagmachines en haakse slijpers</option>
<option value="73">Overig bouw en verbouw</option>
<option value="74">Hoogwerkers</option>
<option value="75">Aggregaten, compressoren en pompen</option>
<option value="76">Boren en breken</option>
<option value="77">Bouwverlichting</option>
<option value="78">Schaftwagens en keten</option>
<option value="83">Sanitair en mobiele toiletten</option>
<option value="84">Opslag en afvalcontainers</option>
<option value="85">Hekken en afrastering</option>
<option value="86">Betonmolens en betonverwerking</option>
<option value="87">Verreikers en heftrucks</option>
<option value="88">Veiligiheidsmateriaal en PBM&#039;s</option>
<option value="89">Lasapparatuur</option>
<option value="90">Hogedruk reinigers en schoonmaak</option>
<option value="91">Elektrisch handgereedschap</option>
<option value="92">Gereedschap algemeen</option>
<option value="93">Graafmachines en shovels</option>
<option value="94">Trilplaten</option>
<option value="98">Grasmaaiers en strimmers</option>
<option value="99">Bladblazers en zuigers</option>
<option value="100">Grondboren en frezen</option>
<option value="101">Kettingzagen, handzagen en scharen</option>
<option value="102">overig tuinonderhoud</option>
<option value="103">Kloofmachines en bijlen</option>
<option value="104">Kruiwagens, scheppen en spades</option>
<option value="105">Houtversnipperaars</option>
<option value="106">Schoffels en harken</option>
<option value="107">Mengpanelen en microfoons</option>
<option value="108">Film en diaprojectors</option>
<option value="109">Overig beeld, licht en geluid</option>
<option value="110">Beamers en bigscreens</option>
<option value="111">Foto en videocamera&#039;s</option>
<option value="112">Versterkers en boxen</option>
<option value="113">Flatscreens en TV&#039;s</option>
<option value="114">Verlichting en stoboscopen</option>
<option value="118">Feestkleding</option>
<option value="119">Mobiele toiletten en sanitair</option>
<option value="120">Vloeren en tapijt</option>
<option value="121">Afrastering en hekken</option>
<option value="122">Geboorte en jubilea</option>
<option value="123">Podia en podiumwagens</option>
<option value="124">Zalen en feestlocaties</option>
<option value="125">Overig feesten en evenementen</option>
<option value="126">Attracties, springkussens en spellen</option>
<option value="127">Feesttenten</option>
<option value="128">Stands en marktkramen</option>
<option value="129">Tapinstallaties en barren</option>
<option value="130">Tribunes</option>
<option value="136">Stoelen, tafels en barkrukken</option>
<option value="137">Kookapparatuur en barbeques</option>
<option value="138">Opslag en afvalcontainers </option>
<option value="139">Koffie, thee en servies</option>
<option value="140">Koel- en warmhoudapparatuur</option>
<option value="141">Zeilboten en catamarans</option>
<option value="142">Rondvaartboten</option>
<option value="143">Sloepen en motorbootjes</option>
<option value="144">Kano&#039;s en Kajakken</option>
<option value="145">Boottrailers</option>
<option value="146">Waterfietsen en jetski&#039;s</option>
<option value="147">Kruisers en luxe jachten</option>
<option value="148">Ligplaatsen</option>
<option value="149">Surfen en kiten</option>
<option value="150">Overig watersport en boten</option>
<option value="154">Aannemers</option>
<option value="155">Installateurs</option>
<option value="156">Schilders</option>
<option value="157">Tuinarchitecten</option>
<option value="158">Stratenmakers</option>
<option value="159">Hoveniers</option>
<option value="160">Bands en artiesten</option>
<option value="161">DJ&#039;s</option>
<option value="162">Catering</option>
<option value="163">Stucadoors</option>
<option value="164">Vrachtwagens</option>
<option value="165">Verhuisbusjes</option>
<option value="166">Garageboxen</option>
<option value="167">Aanhangwagens</option>
<option value="168">Bestelwagens</option>
<option value="169">Opleggers en dieplader</option>
</select>

＆＃13;

＆＃13;

＆＃13;