文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >根据先前输入值的组合显示不同的表单选项

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

Stack Overflow用户
提问于 2018-11-11 10:58:04
回答 1查看 29关注 0票数 0

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

我正在尝试找出如何使用Jquery/Javascript来比较两个眼睛的值，因为需要根据最高的选项显示更多的选项。

这就是我到目前为止所拥有的。每个输入都是独立工作的，我不知道如何解决这个问题。

​

代码语言：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();
        
    };

        
  });
})
代码语言：javascript
复制
<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。最高的应该是要考虑的。

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

javascript
jquery
html
EN

回答 1

Stack Overflow用户

发布于 2018-11-11 15:55:34

在比较数值时，你需要将数值转换为数字类型，在你的例子中，你应该在计算之前对数值进行parse。

从你的段落来看，你的条件对我来说似乎有点复杂，但我还是试着实现了我所理解的一切。希望这篇文章能帮助你根据自己的需要实现剩下的部分。

这是代码片段。

​

代码语言：javascript
复制
$(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();
    }
  });
})
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53245461

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档