Question

我想根据之前选择的另一个选择的值显示另一个选择。但是，动态显示的选择未显示。我使用了promise和data-attribute。

我的剧本应该出现什么问题？

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

Answer 1

您在$(this).val()内使用promise().done()，其中this指的是完成函数中的范围，而不是select change事件。您可以将值存储到另一个变量（示例中为val），并在其他元素淡出后使用该值。

$(function() {

  $('#masterCategory').bind('change', function() {
    var category = $(this).val();

  });

  $('select#masterCategory').bind('change', function() {
    var val = $(this).val();
    $('label#subcategory').fadeIn();
    console.log('select[data-id="' + val + '"]')
    $('select[data-id="' + val + '"]').siblings().fadeOut().promise().done(function() {
      $('select[data-id="' + 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>

Answer 2

$(function () {

        $('#masterCategory').bind('change', function () {
            var category = $(this).val();

        });

        $('select#masterCategory').bind('change', function () {
            $('label#subcategory').fadeIn();
            var parentCategotyId=$(this).val();
            console.log('select[data-id="' + (parentCategotyId) + '"]');
            
            $('select[data-id="' + (parentCategotyId) + '"]').siblings().fadeOut().promise().done(function () {
                    $('select[data-id="' + (parentCategotyId) + '"]').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>

fadein fadeout回调无法正常工作

2 个答案: