Как условно обновить значения select2 - PullRequest
Новая
       12

Как условно обновить значения select2

0 голосов
/ 20 сентября 2019

У меня есть простое поле выбора, и я хотел бы изменить выбранное значение на первый вариант, если значение другого поля соответствует определенным критериям.

Вот 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>

Вот мой JS, который я использую, чтобы попытаться обновить поле.Условие, которое я ищу, таково: если ввод текста меньше 9, то измените выбранную опцию на первую опцию (значение = «0»).Приведенный ниже код работает для HTML, однако он не обновляет HTML select2, отображаемый на экране.Пшеница, которую я хочу сделать, это показать первый выбранный вариант и показать, что это HTML-код select2.

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();

})

Ответы [ 3 ]

1 голос
/ 20 сентября 2019 

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>

Вот вам решение, но, с моей точки зрения, вы должны использовать keydown или keyup или нажатие клавиши события, которые не ожидают события размытия.

0 голосов
/ 20 сентября 2019

Нашел ответ 

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();

})
0 голосов
/ 20 сентября 2019

Атрибут selected не обязательно используется.Использование selectedIndex является лучшей альтернативой. 

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