根据另一个div中的值显示或隐藏div的内容?

时间:2015-07-20 14:03:47

标签: javascript jquery html css

如果另一个div中的值超过某个值,我想在div中显示一条消息。我可以解决这个问题,但是另一个div中的值会根据用户选择的内容而改变,然后每次发生这种情况时所需的消息都不会出现或消失。我目前正在使用:

if ($('#id1').val() < '25') {$('#id2').css('display','none');}

因此#id2设置为正常显示,但当下拉选项将#id1内显示的值更改为小于25时,它需要消失,反之亦然。

有什么想法吗?感谢。

2 个答案:

答案 0 :(得分:0)

你需要:

  1. #id1
  2. 上的绑定事件
  3. 将选定的value转换为整数
  4. 将此与整数25
  5. 进行比较
  6. 使用toggle()根据条件显示/隐藏div
  7. 在页面加载时触发change事件
  8. 代码:

    $('#id1').on('change', function() {
        $('#id2').toggle(parseInt($(this).val().match(/\d+/)[0], 10) >= 25);
    }).trigger('change');
    

    &#13;
    &#13;
    $('#id1').on('change', function() {
      $('#id2').toggle(parseInt($(this).val().match(/\d+/)[0], 10) >= 25);
    }).trigger('change');
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <select id="id1">
      <option value="$0">0</option>
      <option value="£10">10</option>
      <option value="£25">25</option>
      <option value=£50>50</option>
      <option value=£100>100</option>
    </select>
    <br/>
    <br/>
    <div id="id2">This should show when greater than or equal to 25</div>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

这样的事情?

$(document).ready(function() {
  $('#id1').on('change', function() {
    if (parseInt($(this).val()) >= 25) {
      $('#id2').show();
    } else {
      $('#id2').hide();
    }
  });
  // initialize div state
  $('#id1').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="id1">
  <option value=0>0</option>
  <option value=10>10</option>
  <option value=25>25</option>
  <option value=50>50</option>
  <option value=100>100</option>
</select>
<br/>
<br/>
<div id="id2">This should show when greater than or equal to 25</div>