Question

我试图通过第一个下拉选项选择和将选项data-val输入到总计输入字段中来显示和隐藏第二个下拉列表

问题是当我从第一个下拉菜单中选择选项时从第二个下拉菜单开始，比grand_toal输入字段显示正确的价格值，但是当我再次将1st选项从1st选项更改为 grand_total输入字段中的第二个期权价格未删除“我的意思是说价格不会重置为零”甚至没有变化

到目前为止，这是我的代码 html

     <select id="l_type" class="col2" name="type">
                            <option data-val="0" value="">Select One Option</option>   
                            <option data-val="0" value="Linux_Reseller_Web_Hosting">Linux Reseller Web Hosting</option>
                            <option data-val="0" value="Windows_Reseller_Web_Hosting">Windows Reseller Web Hosting</option>  
                          </select>

<!----------------- linux / windows block ---------------->
<div id="Linux_Reseller_Web_Hosting" class="plan" style="display:none;">
    <div class="edit_row">
      <label class="col1">Linux Plans:</label>
      <div class="col2_wrap">
          <select  id="category" class="col2" name="category">

            <option data-val="30000" data_p_id="3" value="Linux - Standard $ 24.99 Or 2,500 Coins /Month">Linux - Standard $ 24.99 Or 2,500 Coins /Month
            </option>
            <option data-val="42000" data_p_id="4" value="Linux - Enhanced $ 34.99 Or 3,500 Coins /Month">Linux - Enhanced $ 34.99 Or 3,500 Coins /Month</option>
            <option data-val="60000" data_p_id="5" value="Linux - Pro $ 49.99 Or 5,000 Coins /Month">Linux - Pro $ 49.99 Or 5,000 Coins /Month</option>
            <option data-val="90000" data_p_id="6" value="Linux - Elite $ 74.99 Or 7,500 Coins /Month">Linux - Elite $ 74.99 Or 7,500 Coins /Month</option>
          </select>
      </div>
      <label class="col3" style="width: 30px;"><i class="btn fa fa-info-circle fa-2x" style="padding:0px;" class="col3" data-popover="true" data-html="true" data-placement="left" data-content="Please choose your plan"<a href="#" target="blank" ></a></i></label>
    </div>
</div>

<div id="Windows_Reseller_Web_Hosting" class="plan" style="display:none;">
    <div class="edit_row">
      <label class="col1">Windows Plans:</label>
      <div class="col2_wrap">
          <select  id="category" class="col2" name="category"> 

              <option data-val="30000" data_p_id="9" value="Windows - Standard $ 24.99 Or 2,500 Coins /Month">Windows - Standard $ 24.99 Or 2,500 Coins /Month
              </option>
              <option data-val="42000" data_p_id="10" value="Windows - Enhanced $ 34.99 Or 3,500 Coins /Month">Windows - Enhanced $ 34.99 Or 3,500 Coins /Month</option>
              <option data-val="60000" data_p_id="11" value="Windows - Pro $ 49.99 Or 5,000 Coins /Month">Windows - Pro $ 49.99 Or 5,000 Coins /Month</option>
              <option data-val="90000" data_p_id="12" value="Windows - Elite $ 74.99 Or 7,500 Coins /Month">Windows - Elite $ 74.99 Or 7,500 Coins /Month</option>
          </select>
      </div>
      <label class="col3" style="width: 30px;"><i class="btn fa fa-info-circle fa-2x" style="padding:0px;" class="col3" data-popover="true" data-html="true" data-placement="left" data-content="Please choose your plan"<a href="#" target="blank" ></a></i></label>
    </div>
</div>
<!---------------- /linux / windows plan block  ------------------>
 <!-- Grand Total Block  -->
                     <div class="edit_row">  
                        <label class="col1">Grand Total</label>
                    <div class="col2_wrap">
                    <div class="fltlft">
                    <input autocomplete="off" type="text" id="grand_total" class="col2 col2_short" name="grand_total" readonly="readonly"style="color:#11B34C ; font-weight:bold;" >
                    </div></div>
          <label class="col3" style="width: 30px;"><i class="btn fa fa-info-circle fa-2x" style="padding:0px;" class="col3" data-popover="true" data-html="true" data-placement="left" data-content="Those coins will be deducted from your account when your order processed.<br><strong>1$ = 100 Coins</strong>"<a href="#" target="blank" ></a></i></label>
                    </div>
<!-- / Grand Total Block  -->

javascript

 <script>
jQuery(document).ready(function() 
 {
    $('#l_type').change(function(){
            $('.plan').hide();
            $('#' + $(this).val()).show();
        });

 }); 
    </script>

在jQuery中的下拉选项更改时重置输入字段值

0 个答案: