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

Question

I'd like to show a message inside a div if the value inside another div is over a certain value. I can work that out but the value inside the other div will change depending on what the user has selected and then the required message doesn't appear or disappear each time this happens. I'm currently using:

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

So #id2 is set to display as normal, but when a dropdown selection changes the value displayed inside #id1 to something less than 25 it needs to disappear and vice versa.

Any ideas? Thanks.

Answer 1

You need to:

1. Bind event on #id1
2. Convert the selected value to integer
3. Compare this against integer 25
4. Use toggle() to show/hide the div based on condition
5. Trigger change event on page load

Code:

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

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

 <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> 

Answer 2

something like this?

 $(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>