根據先前輸入值的組合顯示不同的表單選項

Question

我正在建立一個網站，該網站打算成為銷售眼鏡的商店。 用戶必須從兩種選擇類型輸入中為每只眼睛選擇其處方值，以便能夠為他們選擇合適的鏡片。

我試圖找出如何使用Jquery / Javascript比較兩只眼睛的值，因為需要根據最高的顯示更多的選項。

到目前為止，這就是我所擁有的。 每個輸入都獨立於其他輸入工作，我不知道該如何解決。

 $(function () { $("#selection_1, #selection_2").change(function() { var val = $(this).val(); if(val >="00.00" && val <="01.00" || val <="-01.00" && val >="-00.25" ) { $("#product_b").hide(); } else { $("#product_b").show() }; if(val >="01.25" && val <="02.00" || val <="-02.00" && val >="-01.25" ) { $("#product_a").hide(); } else { $("#product_a").show(); }; }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container "> <div class="form-group col-md-6"> <label class="control-label" for="selection_1">Selection 1</label> <select class="my-form-control" id="selection_1" name="right eye"> <option value="default"disabled>choose...</option> <option value="-02.00">-02.00</option> <option value="-01.75">-01.75</option> <option value="-01.50">-01.50</option> <option value="-01.25">-01.25</option> <option value="-01.00">-01.00</option> <option value="-00.75">-00.75</option> <option value="-00.50">-00.50</option> <option value="-00.25">-00.25</option> <option value="00.00" selected>00.00</option> <option value="00.25">00.25</option> <option value="00.50">00.50</option> <option value="00.75">00.75</option> <option value="01.00">01.00</option> <option value="01.25">01.25</option> <option value="01.50">01.50</option> <option value="01.75">01.75</option> <option value="02.00">02.00</option> </select> </div> <div class="form-group col-md-6"> <label class="control-label" for="selection_2">Selection 2</label> <select class="my-form-control" id="selection_2" name="right eye"> <option value="default" disabled>choose...</option> <option value="-02.00">-02.00</option> <option value="-01.75">-01.75</option> <option value="-01.50">-01.50</option> <option value="-01.25">-01.25</option> <option value="-01.00">-01.00</option> <option value="-00.75">-00.75</option> <option value="-00.50">-00.50</option> <option value="-00.25">-00.25</option> <option value="00.00"selected>00.00</option> <option value="00.25">00.25</option> <option value="00.50">00.50</option> <option value="00.75">00.75</option> <option value="01.00">01.00</option> <option value="01.25">01.25</option> <option value="01.50">01.50</option> <option value="01.75">01.75</option> <option value="02.00">02.00</option> </select> </div> </div> <div class="container"> <div id="product_a" class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> <label class="form-check-label" for="product_a"> Product A </label> </div> <div id="product_b" class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="product_b"> Product B </label> </div> </div> 

這是我需要完成的：如果＃selection_1或＃selection_2在1.00和-1.00之間，則應顯示#product_a。 如果＃selection_1或＃selection_2在1.00和2.00之間，以及-1.00和-2.00之間，則應顯示#product_b。

這是它們如何一起工作的示例：如果selection_1在1.00和2.00之間，並且selection_2在1.00和-1.00之間，則應顯示#product_b。 最高的應該是要考慮的。

我希望有人能幫助我！ 謝謝

Answer 1

比較數字值時，需要將值parse為數字類型，在這種情況下，應在計算前對這些值進行parseFloat() 。

從您的段落來看，您的條件對我來說似乎有些復雜，但我仍然盡我所能實施。 希望這將幫助您根據需要實施其余部分。

這是代碼段。

 $(function() { $("#selection_1, #selection_2").change(function() { var val1 = parseFloat($('#selection_1').val()); var val2 = parseFloat($('#selection_2').val()); if ((val1 => -1.0 && val1 <= 1.0) || (val2 >= -1.0 && val2 <= 1.0)) { $('#product_a').show(); $('#product_b').hide(); } if ((val1 >= 1.0 && val1 <= 2.0) || (val2 >= 1.0 && val2 <= 2.0) || (val1 >= -2.0 && val1 <= -1.0) || (val2 >= -2.0 && val2 <= -1.0)) { $('#product_a').hide(); $('#product_b').show(); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container "> <div class="form-group col-md-6"> <label class="control-label" for="selection_1">Selection 1</label> <select class="my-form-control" id="selection_1" name="right eye"> <option value="default" disabled>choose...</option> <option value="-02.00">-02.00</option> <option value="-01.75">-01.75</option> <option value="-01.50">-01.50</option> <option value="-01.25">-01.25</option> <option value="-01.00">-01.00</option> <option value="-00.75">-00.75</option> <option value="-00.50">-00.50</option> <option value="-00.25">-00.25</option> <option value="00.00" selected>00.00</option> <option value="00.25">00.25</option> <option value="00.50">00.50</option> <option value="00.75">00.75</option> <option value="01.00">01.00</option> <option value="01.25">01.25</option> <option value="01.50">01.50</option> <option value="01.75">01.75</option> <option value="02.00">02.00</option> </select> </div> <div class="form-group col-md-6"> <label class="control-label" for="selection_2">Selection 2</label> <select class="my-form-control" id="selection_2" name="right eye"> <option value="default" disabled>choose...</option> <option value="-02.00">-02.00</option> <option value="-01.75">-01.75</option> <option value="-01.50">-01.50</option> <option value="-01.25">-01.25</option> <option value="-01.00">-01.00</option> <option value="-00.75">-00.75</option> <option value="-00.50">-00.50</option> <option value="-00.25">-00.25</option> <option value="00.00" selected>00.00</option> <option value="00.25">00.25</option> <option value="00.50">00.50</option> <option value="00.75">00.75</option> <option value="01.00">01.00</option> <option value="01.25">01.25</option> <option value="01.50">01.50</option> <option value="01.75">01.75</option> <option value="02.00">02.00</option> </select> </div> </div> <div class="container"> <div id="product_a" class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> <label class="form-check-label" for="product_a"> Product A </label> </div> <div id="product_b" class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="product_b"> Product B </label> </div> </div>