javascript - Jquery 根据单选按钮和选择选项显示和隐藏 div

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

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