Jqueryは配列内のselectオプションのみを表示します

Question

他の選択に属する選択値を持つ配列があります。そのため、最初の選択が変更されたときに、配列内の選択肢のみを表示する必要があります。

したがって、最初の選択が "Vakantie en recreatie"の場合、値 '1,2,13,14,15,16,17,18,19,20,21,22,23,24,25、

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');  
     }); 
    }); 

0123選択rubriek

アレイを示されなければならないで64,65'

Answer 1

オプションをどのように置き換えることができるかを簡単な例で説明しました。オプションを隠すのではなく、IEにはオプションを隠そうとする問題があると考えているので、私は代わりにやりました。

//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); 
 
    }); 
 
});

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