Блог

Главная - Вопросы по программированию - Как проверить, имеет ли выбранный параметр более высокое значение, чем значение из другого выпадающего списка?

Как проверить, имеет ли выбранный параметр более высокое значение, чем значение из другого выпадающего списка?

#javascript #drop-down-menu #dropdown #html-select

#javascript #выпадающее меню #выпадающий список #html-выберите

Вопрос:

Итак, у меня есть эти два выпадающих списка в html, которые выглядят следующим образом :

 <SELECT name="obj_1" size="1" class="archive-select">
        <OPTION selected disabled>from</OPTION>
        <OPTION value="1">Less than 200</OPTION>
        <OPTION value="200">200</OPTION>
        <OPTION value="400">400</OPTION>
        <OPTION value="600">600</OPTION>
        <OPTION value="800">800</OPTION>
        <OPTION value="1000">1'000</OPTION>
        <OPTION value="1200">1'200</OPTION>
        <OPTION value="1400">1'400</OPTION>
        <OPTION value="1600">1'600</OPTION>
        <OPTION value="1800">1'800</OPTION>
        <OPTION value="2000">2'000</OPTION>
        <OPTION value="2200">2'200</OPTION>
        <OPTION value="2400">2'400</OPTION>
        <OPTION value="2600">2'600</OPTION>
        <OPTION value="2800">2'800</OPTION>
        <OPTION value="3000">3'000</OPTION>
    </SELECT><br>
    <SELECT name="obj_2" size="1" style="margin-bottom:15px;" class="archive-select">
        <OPTION selected disabled>to</OPTION>
        <OPTION value="200">200</OPTION>
        <OPTION value="400">400</OPTION>
        <OPTION value="600">600</OPTION>
        <OPTION value="800">800</OPTION>
        <OPTION value="1000">1'000</OPTION>
        <OPTION value="1200">1'200</OPTION>
        <OPTION value="1400">1'400</OPTION>
        <OPTION value="1600">1'600</OPTION>
        <OPTION value="1800">1'800</OPTION>
        <OPTION value="2000">2'000</OPTION>
        <OPTION value="2200">2'200</OPTION>
        <OPTION value="2400">2'400</OPTION>
        <OPTION value="2600">2'600</OPTION>
        <OPTION value="2800">2'800</OPTION>
        <OPTION value="3000">3'000</OPTION>
        <OPTION value="300000">More than 3'000</OPTION>
    </SELECT>

Что я хотел бы сделать, так это когда пользователь выбирает в первом выпадающем списке определенное число, чтобы отключить те, которые имеют меньшее значение во втором выпадающем списке. Например, если я выберу 400, параметры «Менее 200» и «200» должны быть отключены в выпадающем списке.

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

Ответ №1:

Попробуйте так:

 var obj_1 = document.querySelector('select[name="obj_1"]');
var obj_2_options = document.querySelectorAll('select[name="obj_2"] option');

obj_1.onchange = function() {
  var val_1 = parseInt(obj_1.value.replace("'", ""));

  for (var i = 0; i < obj_2_options.length; i  ) {
    var val_2 = parseInt(obj_2_options[i].value.replace("'", ""));
    obj_2_options[i].disabled = (val_2 < val_1);
  }
}  
 <SELECT name="obj_1" size="1" class="archive-select">
  <OPTION selected disabled>from</OPTION>
  <OPTION value="1">Less than 200</OPTION>
  <OPTION value="200">200</OPTION>
  <OPTION value="400">400</OPTION>
  <OPTION value="600">600</OPTION>
  <OPTION value="800">800</OPTION>
  <OPTION value="1000">1'000</OPTION>
  <OPTION value="1200">1'200</OPTION>
  <OPTION value="1400">1'400</OPTION>
  <OPTION value="1600">1'600</OPTION>
  <OPTION value="1800">1'800</OPTION>
  <OPTION value="2000">2'000</OPTION>
  <OPTION value="2200">2'200</OPTION>
  <OPTION value="2400">2'400</OPTION>
  <OPTION value="2600">2'600</OPTION>
  <OPTION value="2800">2'800</OPTION>
  <OPTION value="3000">3'000</OPTION>
</SELECT><br>
<SELECT name="obj_2" size="1" style="margin-bottom:15px;" class="archive-select">
  <OPTION selected disabled>to</OPTION>
  <OPTION value="200">200</OPTION>
  <OPTION value="400">400</OPTION>
  <OPTION value="600">600</OPTION>
  <OPTION value="800">800</OPTION>
  <OPTION value="1000">1'000</OPTION>
  <OPTION value="1200">1'200</OPTION>
  <OPTION value="1400">1'400</OPTION>
  <OPTION value="1600">1'600</OPTION>
  <OPTION value="1800">1'800</OPTION>
  <OPTION value="2000">2'000</OPTION>
  <OPTION value="2200">2'200</OPTION>
  <OPTION value="2400">2'400</OPTION>
  <OPTION value="2600">2'600</OPTION>
  <OPTION value="2800">2'800</OPTION>
  <OPTION value="3000">3'000</OPTION>
  <OPTION value="300000">More than 3'000</OPTION>
</SELECT>

Перебирая option значения для obj_2 , вы можете сравнить их со значением obj_1 и соответствующим образом отключить их.

РЕДАКТИРОВАТЬ: в jQuery это будет:

 var obj_1 = $('select[name="obj_1"]');
var obj_2_options = $('select[name="obj_2"] option');

obj_1.on('change', function() {
  var val_1 = parseInt(obj_1.val().replace("'", ""));
  
  obj_2_options.each(function() {
    var val_2 = parseInt($(this).val().replace("'", ""));
    $(this).attr('disabled', (val_2 < val_1));
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<SELECT name="obj_1" size="1" class="archive-select">
  <OPTION selected disabled>from</OPTION>
  <OPTION value="1">Less than 200</OPTION>
  <OPTION value="200">200</OPTION>
  <OPTION value="400">400</OPTION>
  <OPTION value="600">600</OPTION>
  <OPTION value="800">800</OPTION>
  <OPTION value="1000">1'000</OPTION>
  <OPTION value="1200">1'200</OPTION>
  <OPTION value="1400">1'400</OPTION>
  <OPTION value="1600">1'600</OPTION>
  <OPTION value="1800">1'800</OPTION>
  <OPTION value="2000">2'000</OPTION>
  <OPTION value="2200">2'200</OPTION>
  <OPTION value="2400">2'400</OPTION>
  <OPTION value="2600">2'600</OPTION>
  <OPTION value="2800">2'800</OPTION>
  <OPTION value="3000">3'000</OPTION>
</SELECT><br>
<SELECT name="obj_2" size="1" style="margin-bottom:15px;" class="archive-select">
  <OPTION selected disabled>to</OPTION>
  <OPTION value="200">200</OPTION>
  <OPTION value="400">400</OPTION>
  <OPTION value="600">600</OPTION>
  <OPTION value="800">800</OPTION>
  <OPTION value="1000">1'000</OPTION>
  <OPTION value="1200">1'200</OPTION>
  <OPTION value="1400">1'400</OPTION>
  <OPTION value="1600">1'600</OPTION>
  <OPTION value="1800">1'800</OPTION>
  <OPTION value="2000">2'000</OPTION>
  <OPTION value="2200">2'200</OPTION>
  <OPTION value="2400">2'400</OPTION>
  <OPTION value="2600">2'600</OPTION>
  <OPTION value="2800">2'800</OPTION>
  <OPTION value="3000">3'000</OPTION>
  <OPTION value="300000">More than 3'000</OPTION>
</SELECT>

Комментарии:

1. Привет! Большое вам за это спасибо! Работает как шарм, я сразу же приму ваш ответ 🙂

2. Я добавил версию jQuery к этому ответу на случай, если он все еще нужен.