使用jQuery选择一个值更改另一个选择框值

Question

我有两个选择框。根据第一个选择框更改第二个框的值。

就像用户在第一个选择第二个框的值更改中选择“单一”并显示该值一样 1.（单）3英尺弹簧记忆泡沫床垫（£145.00） 2.（单件）3ft弹簧矫形泡沫床垫（£185.00） 3.（单）3ft Pocket 1000床垫（£185.00） 4.（单）3ft Pocket 2000床垫（225.00英镑）

jQuery(document).ready(function($){
$('.product-addon-add-mattress option').hide();
$('#pa_bed-size').change(function(){

var bedSize = $(this).val();

$('.product-addon-add-mattress option').hide();
    var single = "single",
    SmallDouble ="small-double",
    Double ="double";

    if(bedSize.indexOf(single) != -1){
       var name = $('#pa_bed-size').val().split(' ')[ 0 ];  
	   $('.product-addon-add-mattress select option').each().val(single);
	
     }
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="pa_bed-size" class="" name="attribute_pa_bed-size" >
    <option value="">Choose an option</option>
    <option value="single" class="attached enabled">Single</option>
    <option value="small-double" class="attached enabled">Small Double</option>
    <option value="double" class="attached enabled">Double</option>
    <option value="king" class="attached enabled">King</option>
    <option value="super-king" class="attached enabled">Super King</option>
</select>



<select class="addon addon-select" name="addon-2696-add-mattress-0">
    <option value="">Select an option...</option>
    <option data-raw-price="0" data-price="" value="not-required-1">Not Required</option>
    <option data-raw-price="145" data-price="145" value="single-3ft-spring-memory-foam-mattress-2">(Single) 3ft Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="single-3ft-spring-orthopedic-foam-mattress-3">(Single) 3ft Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="single-3ft-pocket-1000-mattress-4">(Single) 3ft Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="single-3ft-pocket-2000-mattress-5">(Single) 3ft Pocket 2000 Mattress (£225.00)</option>
    <option data-raw-price="145" data-price="145" value="small-double-4ft-spring-memory-foam-mattress-6">(Small Double) 4ft Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="small-double-4ft-spring-orthopedic-foam-mattress-7">(Small Double) 4ft Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="small-double-4ft-pocket-1000-mattress-8">(Small Double) 4ft Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="small-double-4ft-pocket-2000-mattress-9">(Small Double) 4ft Pocket 2000 Mattress (£225.00)</option>
    <option data-raw-price="145" data-price="145" value="double-4ft6-spring-memory-foam-mattress-10">(Double) 4ft6 Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="double-4ft6-spring-orthopedic-foam-mattress-11">(Double) 4ft6 Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="double-4ft6-pocket-1000-mattress-12">(Double) 4ft6 Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="double-4ft6-pocket-2000-mattress-13">(Double) 4ft6 Pocket 2000 Mattress (£225.00)</option>
    <option data-raw-price="145" data-price="145" value="king-6ft-spring-memory-foam-mattress-14">(King) 6ft Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="king-6ft-spring-orthopedic-foam-mattress-15">(King) 6ft Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="king-6ft-pocket-1000-mattress-16">(King) 6ft Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="king-6ft-pocket-2000-mattress-17">(King) 6ft Pocket 2000 Mattress (£225.00)</option>
    <option data-raw-price="145" data-price="145" value="super-king-6ft-spring-memory-foam-mattress-18">(Super King) 6ft Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="super-king-6ft-spring-orthopedic-foam-mattress-19">(Super King) 6ft Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="super-king-6ft-pocket-1000-mattress-20">(Super King) 6ft Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="super-king-6ft-pocket-2000-mattress-21">(Super King) 6ft Pocket 2000 Mattress (£225.00)</option>
</select>

Answer 1

我不会为您提供全部功能的实现，也不是最好的方法，但是我会为您提供指导。

请按以下方式检查：

jQuery(document).ready(function($){
  $('.product-addon-add-mattress option').hide();
  $('#pa_bed-size').change(function(){

  var bedSize = $(this).val();
  
  $('.addon option').each(function() {
      if ($(this).val().indexOf(bedSize) == 0) {
        $(this).show();
      } else {
        $(this).hide();
      }
  })
  
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pa_bed-size" class="" name="attribute_pa_bed-size" >
    <option value="">Choose an option</option>
    <option value="single" class="attached enabled">Single</option>
    <option value="small-double" class="attached enabled">Small Double</option>
    <option value="double" class="attached enabled">Double</option>
    <option value="king" class="attached enabled">King</option>
    <option value="super-king" class="attached enabled">Super King</option>
</select>



<select class="addon addon-select" name="addon-2696-add-mattress-0">
    <option value="">Select an option...</option>
    <option data-raw-price="0" data-price="" value="not-required-1">Not Required</option>
    <option data-raw-price="145" data-price="145" value="single-3ft-spring-memory-foam-mattress-2">(Single) 3ft Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="single-3ft-spring-orthopedic-foam-mattress-3">(Single) 3ft Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="single-3ft-pocket-1000-mattress-4">(Single) 3ft Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="single-3ft-pocket-2000-mattress-5">(Single) 3ft Pocket 2000 Mattress (£225.00)</option>
    <option data-raw-price="145" data-price="145" value="small-double-4ft-spring-memory-foam-mattress-6">(Small Double) 4ft Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="small-double-4ft-spring-orthopedic-foam-mattress-7">(Small Double) 4ft Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="small-double-4ft-pocket-1000-mattress-8">(Small Double) 4ft Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="small-double-4ft-pocket-2000-mattress-9">(Small Double) 4ft Pocket 2000 Mattress (£225.00)</option>
    <option data-raw-price="145" data-price="145" value="double-4ft6-spring-memory-foam-mattress-10">(Double) 4ft6 Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="double-4ft6-spring-orthopedic-foam-mattress-11">(Double) 4ft6 Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="double-4ft6-pocket-1000-mattress-12">(Double) 4ft6 Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="double-4ft6-pocket-2000-mattress-13">(Double) 4ft6 Pocket 2000 Mattress (£225.00)</option>
    <option data-raw-price="145" data-price="145" value="king-6ft-spring-memory-foam-mattress-14">(King) 6ft Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="king-6ft-spring-orthopedic-foam-mattress-15">(King) 6ft Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="king-6ft-pocket-1000-mattress-16">(King) 6ft Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="king-6ft-pocket-2000-mattress-17">(King) 6ft Pocket 2000 Mattress (£225.00)</option>
    <option data-raw-price="145" data-price="145" value="super-king-6ft-spring-memory-foam-mattress-18">(Super King) 6ft Spring Memory Foam Mattress (£145.00)</option>
    <option data-raw-price="185" data-price="185" value="super-king-6ft-spring-orthopedic-foam-mattress-19">(Super King) 6ft Spring Orthopedic Foam Mattress (£185.00)</option>
    <option data-raw-price="185" data-price="185" value="super-king-6ft-pocket-1000-mattress-20">(Super King) 6ft Pocket 1000 Mattress (£185.00)</option>
    <option data-raw-price="225" data-price="225" value="super-king-6ft-pocket-2000-mattress-21">(Super King) 6ft Pocket 2000 Mattress (£225.00)</option>
</select>

如果您有任何疑问，请随时告诉我。