Jquery показывает и скрывает дивы на основе переключателей и выбора параметров

Question

Я хочу показать цену товара, когда клиент выбирает тип и размер с помощью переключателей и выбирает опции.

Допустим, клиент выбирает тип «одинарный», а цена «75X36» должна отображаться как «14 260 рупий, как показано в таблице ниже. Аналогично, я хочу отображать цену на основе выбора

Это таблица, которую я хочу отобразить в этом формате

Мне как-то удалосьизменить значения флажков на основе переключателя, выбранного с помощью следующего кода

<div class="prod">
    <div class="radio-group" id="test">
        <input type="radio" id="option-one" name="selector" value="1" checked>
        <label class="labelr" for="option-one" value="1">SINGLE</label>
        <input type="radio" id="option-two" name="selector" value="2">
        <label class="labelr" for="option-two" value="1">DOUBLE</label>
        <input type="radio" id="option-three" name="selector" value="3">
        <label class="labelr" for="option-three">QUEEN</label>
        <input type="radio" id="option-four" name="selector" value="4">
        <label class="labelr" for="option-four" >KING</label>
    </div>
</div>
<div class="prod">
    <h4 class="prod-hd">Mattress size:</h4>

    <div class="box1"  id="selectList">
        <select  class="select-box">
            <option value="a">72X36</option>
            <option value="b">75X36</option>
            <option value="c">78X36</option>
        </select>
    </div>
</div>

jquery

$('#test input:radio').change(function () {
    var selectedVal = $("#test input:radio:checked").val();
    if (1 == selectedVal) {
        var single = '<select id="selectList1" class="select-box" ><option value="a">72X36</option> <option value="b">75X36</option><option value="c">78X36</option></select>';
        $('select').remove();
        $('#selectList').append(single);
    } else if (2 == selectedVal) {
        var double = '<select id="selectList2"class="select-box" ><option value="d">72X48</option> <option value="e">75X48</option><option value="f">78X48</option></select>';
        $('select').remove();
        $('#selectList').append(double);
    } else if (3 == selectedVal) {
        var queen = '<select id="selectList3"class="select-box" ><option value="g">72X60</option> <option value="h">75X60</option><option value="i">78X60</option></select>';
        $('select').remove();
        $('#selectList').append(queen);
    }
    else if (4 == selectedVal) {
        var king = '<select id="selectList4"class="select-box" ><option value="j">72X72</option> <option value="k">75X72</option value="l"><option>78X72</option><option value="m">84X72</option></select>';
        $('select').remove();
        $('#selectList').append(king);
    }

});

Пожалуйста, помогите мне отобразить цену для обоих переключателей и выберите параметр

<div class="p-price">
    <span id="a" class="prod-price" >Rs 13,900</span> 
</div>

Answer 1

Вот фрагмент кода, согласно вашему вопросу. Я сделал несколько изменений в вашем коде, чтобы он работал, я изменил идентификаторы и значения раскрывающегося списка, которые вы сгенерировали с помощью jquery / javascript.

$('#test input:radio').change(function() {
  var selectedVal = $("#test input:radio:checked").val();
  if (1 == selectedVal) {
    var single = '<select id="dropDownList" class="select-box" ><option value="a">72X36</option> <option value="b">75X36</option><option value="c">78X36</option></select>';
    $('select').remove();
    $('#selectList').append(single);
  } else if (2 == selectedVal) {
    var double = '<select id="dropDownList"class="select-box" ><option value="a">72X48</option> <option value="b">75X48</option><option value="c">78X48</option></select>';
    $('select').remove();
    $('#selectList').append(double);
  } else if (3 == selectedVal) {
    var queen = '<select id="dropDownList"class="select-box" ><option value="a">72X60</option> <option value="b">75X60</option><option value="c">78X60</option></select>';
    $('select').remove();
    $('#selectList').append(queen);
  } else if (4 == selectedVal) {
    var king = '<select id="dropDownList"class="select-box" ><option value="a">72X72</option> <option value="b">75X72</option value="c"><option>78X72</option><option value="d">84X72</option></select>';
    $('select').remove();
    $('#selectList').append(king);
  }
});
$("#selectList").change(function() {
  calculatePrice();
});
$('input[type=radio][name=selector]').change(function() { 
  calculatePrice();
});
function calculatePrice(){
  var checkBoxVal = $('input[name=selector]:checked').val();
  //console.log(checkBoxVal);
  var selectBoxVal = $('#dropDownList').find(":selected").val();
  //console.log(selectBoxVal);
  //Calcualtions
  if(checkBoxVal == 1){
    if(selectBoxVal=='a'){
      $("#priceHolder").text("Rs 13,900");
    }
    if(selectBoxVal=='b'){
      $("#priceHolder").text("Rs 14,260");
    }
    if(selectBoxVal=='c'){
      $("#priceHolder").text("Rs 14,400");
    }
  }
  if(checkBoxVal==2){
    if(selectBoxVal=='a'){
      $("#priceHolder").text("Rs 16,920");
    }
    if(selectBoxVal=='b'){
      $("#priceHolder").text("Rs 17,400");
    }
    if(selectBoxVal=='c'){
      $("#priceHolder").text("Rs 17,880");
    }
  }
  if(checkBoxVal==3){
    if(selectBoxVal=='a'){
      $("#priceHolder").text("Rs 18,960");
    }
    if(selectBoxVal=='b'){
      $("#priceHolder").text("Rs 19,560");
    }
    if(selectBoxVal=='c'){
      $("#priceHolder").text("Rs 24,180");
    }
  }
  if(checkBoxVal==4){
    if(selectBoxVal=='a'){
      $("#priceHolder").text("Rs 22,080");
    }
    if(selectBoxVal=='b'){
      $("#priceHolder").text("Rs 24,000");
    }
    if(selectBoxVal=='c'){
      $("#priceHolder").text("Rs 25,920");
    }
    if(selectBoxVal=='d'){
      $("#priceHolder").text("Rs 28,680");
    }
  }
}
$(document).ready(function() {
  calculatePrice();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prod">
  <div class="radio-group" id="test">
    <input type="radio" id="option-one" name="selector" value="1" checked>
    <label class="labelr" for="option-one" value="1">SINGLE</label>
    <input type="radio" id="option-two" name="selector" value="2">
    <label class="labelr" for="option-two" value="1">DOUBLE</label>
    <input type="radio" id="option-three" name="selector" value="3">
    <label class="labelr" for="option-three">QUEEN</label>
    <input type="radio" id="option-four" name="selector" value="4">
    <label class="labelr" for="option-four">KING</label>
  </div>
</div>
<div class="prod">
  <h4 class="prod-hd">Mattress size:</h4>

  <div class="box1" id="selectList">
    <select class="select-box" id="dropDownList">
      <option value="a">72X36</option>
      <option value="b">75X36</option>
      <option value="c">78X36</option>
    </select>
  </div>
</div>
<div class="p-price">
  <span id="priceHolder" class="prod-price"></span>
</div>

Надеюсь, это поможет.

Answer 2

Вот код JavaScript.

$(document).ready(function() {
   $('#test input:radio').change(function () {
     var selectedVal = $("#test input:radio:checked").val();
     if (1 == selectedVal) {
           var single = '<select id="selectList1" class="select-box" ><option 
                   value="a">72X36</option> <option value="b">75X36</option><option 
                   value="c">78X36</option></select>';
           $('select').remove();
           $('#selectList').append(single);
     } else if (2 == selectedVal) {
           var double = '<select id="selectList2"class="select-box" ><option 
                        value="d">72X48</option> <option value="e">75X48</option><option 
                        value="f">78X48</option></select>';
           $('select').remove();
           $('#selectList').append(double);
     } else if (3 == selectedVal) {
           var queen = '<select id="selectList3"class="select-box" ><option 
                       value="g">72X60</option> <option value="h">75X60</option><option 
                       value="i">78X60</option></select>';
                       $('select').remove();
                       $('#selectList').append(queen);
     }
     else if (4 == selectedVal) {
           var king = '<select id="selectList4"class="select-box" ><option 
                      value="j">72X72</option> <option value="k">75X72</option value="l"> 
                      <option>78X72</option><option value="m">84X72</option></select>';
           $('select').remove();
           $('#selectList').append(king); 
    }
    showPrice();
   });
   $('#selectList').on('change', 'select', function() {
     showPrice();
   });

   function showPrice() {

    var prices = {
      1: [
        '13,900',
        '14,260',
        '14,400'
        ],
      2: [
        '16,920',
        '17,400',
        '17,880'
        ],
      3: [
        '18,960',
        '19,560',
        '21,480'
        ],
      4: [
        '22,080',
        '24,000',
        '25,920',
        '28,680'
        ],
    };
     var selectedOption =  $("#test input:radio:checked").val();
     var index = $("#selectList select").prop('selectedIndex');
     var priceText = prices[selectedOption][index];

    $(".p-price .prod-price").html('Rs ' + priceText);
    }
});