CODEWITHSUNDEEP
jqueryjquery-select2
Alex Knopp
Alex Knopp

Reputation: 935

How to conditionally update select2 values

I have a simple select field and I would like to change the selected value to the first option if the value of another field meets a certain criteria.

Here is the HTML.

<input id="price" value="" name="price">
<select id="discountselect" name="disc">
    <option value="0">Discount. Default 0%</option>
    <option value="30">30%</option>
    <option value="40">40%</option>
    <option value="50">50%</option>
</select>

Here is my JS Im using to try to update the field. The condition Im looking for is: If the text input is lower than 9, then change the selected option to the first option (value="0"). The below code works for the HTML however, it doesn't update the select2 HTML rendered on screen. Wheat I want to do is to show the first option as selected and show this is the select2 HTML. 

jQuery('input#price').on('blur', function(){

    var price = jQuery('input#price').val();
    console.log(price);
    if (price <= 9) {
        //Change it to the 0 value
        jQuery('#discountselect option').removeAttr('selected');
        console.log('works');
    }
    updateTotal();

})

Upvotes: 0

Views: 989

Answers (3)

ankitkanojia
ankitkanojia

Reputation: 3122

jQuery('input#price').on('blur', function() {
  var price = jQuery('input#price').val();
  console.log(price);
  if (price <= 9) {
    //Change it to the 0 value
    jQuery('#discountselect option:nth-child(1)').prop("selected", true).change();
    console.log('works');
  }
  //updateTotal();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="price" value="" name="price">
<select id="discountselect" name="disc">
  <option value="0">Discount. Default 0%</option>
  <option value="30">30%</option>
  <option value="40">40%</option>
  <option value="50">50%</option>
</select>

Here is you're a solution but as from my perspective, you should use keydown or keyup or keypress events, which don't wait to for blur event.

Upvotes: 1

Alex Knopp
Alex Knopp

Reputation: 935

Found the answer

jQuery('input#price').on('blur', function(){

    var price = jQuery('input#price').val();
    console.log(price);
    if (price <= 9) {
        //Change it to the 0 value
        jQuery('#discountselect option').removeAttr('selected');
        jQuery("#discountselect").val('0').trigger('change.select2');
    }
    updateTotal();

})

Upvotes: 1

Gerard
Gerard

Reputation: 15786

Attribute selected is not necessarily used. Using selectedIndex is a better alternative.

jQuery('input#price').on('blur', function() {

  var price = jQuery('input#price').val();
  console.log(price);
  if (price <= 9) {
    //Change it to the 0 value
    //jQuery('#discountselect option').removeAttr('selected');
    jQuery("#discountselect").prop("selectedIndex", 0);
    console.log('works');
  }
  //updateTotal();

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="price" value="" name="price">
<select id="discountselect" name="disc">
  <option value="0">Discount. Default 0%</option>
  <option value="30">30%</option>
  <option value="40">40%</option>
  <option value="50">50%</option>
</select>

Upvotes: 1

Related Questions