javascript - 数据属性中的逗号不起作用

Question

在下面的代码片段中，根据上一个下拉列表的选定值显示一个下拉列表。其中一个值包含逗号:书籍、体育和爱好。

应动态显示的下拉列表是使用名为 data-id 的数据属性获取的。为什么下拉列表没有显示该特定值？

$(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()) + '"]').fadeIn().siblings().fadeOut();
//                            $('select#' + $(this).val()).fadeIn().siblings().fadeOut();

        });

    });

<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 and 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="Kdata-ids" 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>

Answer 1

将 data-id="图书、体育和爱好" 更改为 data-id="图书、体育和爱好"

$(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()) + '"]').fadeIn().siblings().fadeOut();
//                            $('select#' + $(this).val()).fadeIn().siblings().fadeOut();

        });

    });

<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 and 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 and 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="Kdata-ids" 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>