根据先前输入值的组合显示不同的表单选项

时间：2018-11-11 02:58:04

标签： javascript jquery html

我正在建立一个网站，该网站应该是销售眼镜的商店。 用户必须从两种选择类型输入中为每只眼睛选择其处方值，以便能够为他们选择合适的镜片。

我正试图找出如何使用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。最高的应该是那个 考虑。

我希望有人能帮助我！谢谢

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题