Jquery show and hides divs based on both radio buttons and select options

Question

I want show the price of the product when the customer select the type and size using the radio buttons and select options.

lets say customer select type "single" and size "75X36" price should be displayed as " Rs. 14,260. as shown in the table below. Likewise I wise I want to display price based on the selection

This is the table I want to display using this format

I have somehow managed to change checkbox values based on the radio button selected using following code

<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);
    }

});

Please help me display the price based on both radio button and select option

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

Answer 1

Here's a code snippet, as per your question. I've made couple of changes in your code to make it work, I've changed IDs and values of dropdown which you have generated through 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>

Hope this helps.

Answer 2

Here is the javascript code.

$(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);
    }
});