CODEWITHSUNDEEP
jquerydrop-down-menunumbers
Mark Feltwell
Mark Feltwell

Reputation: 55

How do I get jQuery to check number values numerically?

In my code I have an if statement that checks if a value from a select tag is greater than or equal to another value from another select tag.

How do I change my code so that it checks this numerically instead of the usual unicode way? For example it returns 1,000,000 being lower than 500,000.

I'm not really sure what I should be looking for here unfortunately. Any help in the right direction would be appreciated.

HTML

<select id="price_min" name="price_min" class="custom-select">
  <option value="1" selected>Any min</option>
  <option value="50000">£50,000</option>
  <option value="100000">£100,000</option>
  <option value="150000">£150,000</option>
  <option value="200000">£200,000</option>                
  <option value="300000">£300,000</option>                
  <option value="400000">£400,000</option>                
  <option value="500000">£500,000</option>
  <option value="1000000">£1,000,000</option>
  <option value="2000000">£2,000,000</option>
  <option value="5000000">£5,000,000</option>
  <option value="10000000">£10,000,000</option>
</select>

<select id="price_max" name="price_max" class="custom-select">
  <option value="1" selected>Any max</option>
  <option value="50000">£50,000</option>
  <option value="100000">£100,000</option>
  <option value="150000">£150,000</option>
  <option value="200000">£200,000</option>
  <option value="300000">£300,000</option>
  <option value="400000">£400,000</option>
  <option value="500000">£500,000</option>
  <option value="1000000">£1,000,000</option>
  <option value="2000000">£2,000,000</option>
  <option value="5000000">£5,000,000</option>
  <option value="10000000">£10,000,000</option>
</select>

jQuery:

   var min = $('#price_min').val(),
   max = $('#price_max').val();


  $('#price_max option').show();

  if (min != 1) {
    $('#price_max option').filter(function(){
      return parseInt(this.value,10) <= min;
    }).hide();

    if (min >= max) {

      $('#price_max').val(min);
      $('#price_max option:selected').next().attr('selected', 'selected');
    }
  }

When the min price is selected all value lower than that will be hidden from the max list. When a min price is selected and is higher than the select max price it needs to hide the relevant values and then select the next highest value available in the max list.

Whatever happens I do not want anyone to be able to select a lower price in the max list than is already selected in the min list.

Thanks

Upvotes: 1

Views: 62

Answers (2)

Ntiyiso Rikhotso
Ntiyiso Rikhotso

Reputation: 720

My approach would be :

var $min = $('#price_min');
var $max = $('#price_max');

var minVal = getNumber($min.val())
var maxVal = getNumber($max.val())


if (minVal != 1) {
  $max.find('option').filter(function() {
    return getNumber(this.value) <= minVal;
  }).hide();

  if (minVal >= maxVal) {
    $max.val(minVal);
    $max.find('option:selected').next().prop('selected', true);
  }
}

function getNumber(value){
   return parseInt(value, 10); //10 is the radix, it ranges from 2-36
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="price_min" name="price_min" class="custom-select">
  <option value="1" selected>Any min</option>
  <option value="50000">£50,000</option>
  <option value="100000">£100,000</option>
  <option value="150000">£150,000</option>
  <option value="200000">£200,000</option>                
  <option value="300000">£300,000</option>                
  <option value="400000">£400,000</option>                
  <option value="500000">£500,000</option>
  <option value="1000000">£1,000,000</option>
  <option value="2000000">£2,000,000</option>
  <option value="5000000">£5,000,000</option>
  <option value="10000000">£10,000,000</option>
</select>

<select id="price_max" name="price_max" class="custom-select">
  <option value="1" selected>Any max</option>
  <option value="50000">£50,000</option>
  <option value="100000">£100,000</option>
  <option value="150000">£150,000</option>
  <option value="200000">£200,000</option>
  <option value="300000">£300,000</option>
  <option value="400000">£400,000</option>
  <option value="500000">£500,000</option>
  <option value="1000000">£1,000,000</option>
  <option value="2000000">£2,000,000</option>
  <option value="5000000">£5,000,000</option>
  <option value="10000000">£10,000,000</option>
</select>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337590

You can use parseInt() to achieve this. I can see in your code that you already use it in one place, but you would be best to do it at the point you create the min and max values:

var min = parseInt($('#price_min').val(), 10),
  max = parseInt($('#price_max').val(), 10);

$('#price_max option').show();

if (min != 1) {
  $('#price_max option').filter(function() {
    return parseInt(this.value, 10) <= min;
  }).hide();

  if (min >= max) {
    $('#price_max').val(min);
    $('#price_max option:selected').next().prop('selected', true);
  }
}

Upvotes: 2

Related Questions