I want to show another select based on the previously selected value of another select. However, the dynamically appearing select is not showing. I used promise and data-attribute.
What should be the problem in my script?
$(function () {
$('#masterCategory').bind('change', function () {
var category = $(this).val();
});
$('select#masterCategory').bind('change', function () {
$('label#subcategory').fadeIn();
console.log('select[data-id="' + ($(this).val()) + '"]')
$('select[data-id="' + ($(this).val()) + '"]').siblings().fadeOut().promise().done(function () {
$('select[data-id="' + ($(this).val()) + '"]').fadeIn();
}
);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select Category <span>*</span></label>
<select id="masterCategory" required class="selection" name="category">
<option>Select Category</option>
<option>Mobiles</option>
<option>Electronics and Appliances</option>
<option>Cars</option>
<option>Bikes</option>
<option>Furniture</option>
<option>Pets</option>
<option>Books, Sports & Hobbies</option>
<option>Fashion</option>
<option>Kids</option>
<option>Services</option>
<option>Real Estate</option>
</select>
<div class="clearfix"></div>
<label id="subcategory" style="display: none">Select Sub-Category <span>*</span></label>
<div>
<select data-id="Cars" style="display: none">
<option href="cars.html">Commercial Vehicles</option>
<option href="cars.html">Other Vehicles</option>
<option href="cars.html">Spare Parts</option>
</select>
<select data-id="Bikes" style="display: none">
<option href="bikes.html">Motorcycles</option>
<option href="bikes.html">Scooters</option>
<option href="bikes.html">Bicycles</option>
<option href="bikes.html">Spare Parts</option>
</select>
<select data-id="Furniture" style="display: none">
<option href="furnitures.html">Sofa & Dining</option>
<option href="furnitures.html">Beds & Wardrobes</option>
<option href="furnitures.html">Home Decor & Garden</option>
<option href="furnitures.html">Other Household Items</option>
</select>
<select data-id="Pets" style="display: none">
<option href="pets.html">Dogs</option>
<option href="pets.html">Aquariums</option>
<option href="pets.html">Pet Food & Accessories</option>
<option href="pets.html">Other Pets</option>
</select>
<select data-id="Books, Sports & Hobbies" style="display: none">
<option href="books-sports-hobbies.html">Books & Magazines</option>
<option href="books-sports-hobbies.html">Musical Instruments</option>
<option href="books-sports-hobbies.html">Sports Equipment</option>
<option href="books-sports-hobbies.html">Gym & Fitness</option>
<option href="books-sports-hobbies.html">Other Hobbies</option>
</select>
<select data-id="Fashion" style="display: none">
<option href="fashion.html">Clothes</option>
<option href="fashion.html">Footwear</option>
<option href="fashion.html">Accessories</option>
</select>
<select data-id="Kids" style="display: none">
<option href="kdata-ids.html">Furniture And Toys</option>
<option href="kdata-ids.html">Prams & Walkers</option>
<option href="kdata-ids.html">Accessories</option>
</select>
<select data-id="Services" style="display: none">
<option href="services.html">Education & Classes</option>
<option href="services.html">Web Development</option>
<option href="services.html">Electronics & Computer Repair</option>
<option href="services.html">Madata-ids & Domestic Help</option>
<option href="services.html">Health & Beauty</option>
<option href="services.html">Movers & Packers</option>
<option href="services.html">Drivers & Taxi</option>
<option href="services.html">Event Services</option>
<option href="services.html">Other Services</option>
</select>
<select data-id="Jobs" style="display: none">
<option href="jobs.html">Customer Service</option>
<option href="jobs.html">IT</option>
<option href="jobs.html">Online</option>
<option href="jobs.html">Marketing</option>
<option href="jobs.html">Advertising & PR</option>
<option href="jobs.html">Sales</option>
<option href="jobs.html">Clerical & Administration</option>
<option href="jobs.html">Human Resources</option>
<option href="jobs.html">Education</option>
<option href="jobs.html">Hotels & Tourism</option>
<option href="jobs.html">Accounting & Finance</option>
<option href="jobs.html">Manufacturing</option>
<option href="jobs.html">Part - Time</option>
<option href="jobs.html">Other Jobs</option>
</select>
<select data-id="Real Estate" style="display: none">
<option href="real-estate.html">Houses</option>
<option href="real-estate.html">Apartments</option>
<option href="real-estate.html">PG & Roommates</option>
<option href="real-estate.html">Land & Plots</option>
<option href="real-estate.html">Shops - Offices - Commercial Space</option>
<option href="real-estate.html">Vacation Rentals - Guest Houses</option>
</select>
<select data-id="Mobiles" style="display: none">
<option href="mobiles.html">Mobile phones</option>
<option href="mobiles.html">Tablets</option>
<option href="mobiles.html">Accessories</option>
</select>
<select data-id="Electronics and Appliances" style="display: none">
<option href="electronics-appliances.html">Computers & accessories</option>
<option href="electronics-appliances.html">Tv - vdata-ideo - audio</option>
<option href="electronics-appliances.html">Cameras & accessories</option>
<option href="electronics-appliances.html">Games & Entertainment</option>
<option href="electronics-appliances.html">Frdata-idge - AC - Washing Machine</option>
<option href="electronics-appliances.html">Kitchen & Other Appliances</option>
</select>
</div>
<script type="text/javascript">
</script>
