Блог

Главная - Вопросы по программированию - Создайте параметры для с шагами на основе максимального значения по запросу

Создайте параметры для с шагами на основе максимального значения по запросу

#jquery

Вопрос:

Мне нужно создать 2 варианта выбора (ценовой диапазон) с такими опциями

 <select id="price1">
  <option selected="selected" value="0">0</option>
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
  <option value="400">400</option>
  <option value="500">500</option>
  <option value="600">600</option>
  <option value="700">700</option>
  <option value="800">800</option>
  <option value="900">900</option>
  <option value="1000">1000</option>   
</select>

<select id="price2">
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
  <option value="400">400</option>
  <option value="500">500</option>
  <option value="600">600</option>
  <option value="700">700</option>
  <option value="800">800</option>
  <option value="900">900</option>
  <option selected="selected" value="1000">1000</option>
</select>

Поэтому я вручную создал эти варианты, но в некоторых категориях у меня есть товары с максимальной ценой = 300, а в некоторых-1200.

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

Например, если:

 $(function() {
    var vallmax = 300;
});

Ожидаемый результат:

 <select id="price1">
<option selected="selected" value="0">0</option>
<option value="100">100</option>
<option value="200">200</option>

И

 <select id="price2">
<option value="100">100</option>
<option value="200">200</option>
<option selected="selected" value="300">300</option>

Ответ №1:

Отфильтруйте и скройте свой параметр на основе значения вашей базы данных(vallmax) .

 var vallmax = 300; // Get max value from datatbase 
var opt1 = vallmax - 100;
$('#price1 option').filter(function() {
  return parseInt(this.value, 10) > opt1;
}).hide();
$('#price2 option').filter(function() {
  return parseInt(this.value, 10) > vallmax;
}).hide();
$('#price2').val(vallmax); //Select default max value for second dropdown 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="price1">
  <option selected="selected" value="0">0</option>
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
  <option value="400">400</option>
  <option value="500">500</option>
  <option value="600">600</option>
  <option value="700">700</option>
  <option value="800">800</option>
  <option value="900">900</option>
  <option value="1000">1000</option>
</select>
<select id="price2">
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
  <option value="400">400</option>
  <option value="500">500</option>
  <option value="600">600</option>
  <option value="700">700</option>
  <option value="800">800</option>
  <option value="900">900</option>
  <option selected="selected" value="1000">1000</option>
</select>
Метки: