выберите одно значение измените другое выберите значение поля с помощью jquery

Question

У меня есть два поля выбора. 2-й блок меняет значение в соответствии с первым полем выбора.

как если бы пользователь выбирал «одиночный» в опции при первом выборе, 2-й блок менял значение и показывал это значение 1. (Один) 3-футовый пружинный матрас с пружинной памятью (£ 145.00)2. (Одноместный) 3-футовый пружинный ортопедический поролоновый матрас (185,00 фунтов стерлингов) 3. (Одноместный) 3-футовый карманный матрас 1000 футов (185,00 фунтов) 4. (Одноместный) 3-футовый карманный матрас 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>

Пожалуйста, не стесняйтесь, дайте мне знать, если у вас есть какие-либо вопросы.