基于两个单选按钮和选择选项的jQuery显示和隐藏divs

Posted 2023-02-01

当客户使用单选按钮并选择选项来选择类型和尺寸时，我想显示产品的价格。

这是我要使用此格式显示的表格

我已经设法通过使用以下代码选择的单选按钮来更改复选框的值

<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>

答案

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