JQuery установить диапазон опций мин и макс

Question

Хотелось бы отфильтровать опцию выбора по минимальному и максимальному значению, но я понятия не имею, как это сделать. Ниже приведен выбор со значениями от 10 до 30:

<select id="dp_larghezza" data-id="391" data-type="8" class="form-control dp_entry dp_dropdown" data-name="larghezza" data-label="Larghezza Esterna  L">
    <option data-id="2733" data-label="10" data-color="" data-thumb="" data-image="" data-has-image="" value="10">10</option>
    <option data-id="2734" data-label="11" data-color="" data-thumb="" data-image="" data-has-image="" value="11">11</option>
    <option data-id="2735" data-label="12" data-color="" data-thumb="" data-image="" data-has-image="" value="12">12</option>
    <option data-id="2736" data-label="13" data-color="" data-thumb="" data-image="" data-has-image="" value="13">13</option>
    <option data-id="2737" data-label="14" data-color="" data-thumb="" data-image="" data-has-image="" value="14">14</option>
    <option data-id="2738" data-label="15" data-color="" data-thumb="" data-image="" data-has-image="" value="15">15</option>
    <option data-id="2739" data-label="16" data-color="" data-thumb="" data-image="" data-has-image="" value="16">16</option>
    <option data-id="2740" data-label="17" data-color="" data-thumb="" data-image="" data-has-image="" value="17">17</option>
    <option data-id="2744" data-label="18" data-color="" data-thumb="" data-image="" data-has-image="" value="18">18</option>
    <option data-id="2743" data-label="19" data-color="" data-thumb="" data-image="" data-has-image="" value="19">19</option>
    <option data-id="2742" data-label="20" data-color="" data-thumb="" data-image="" data-has-image="" value="20">20</option>
    <option data-id="2741" data-label="21" data-color="" data-thumb="" data-image="" data-has-image="" value="21">21</option>
    <option data-id="2745" data-label="22" data-color="" data-thumb="" data-image="" data-has-image="" value="22">22</option>
    <option data-id="2746" data-label="23" data-color="" data-thumb="" data-image="" data-has-image="" value="23">23</option>
    <option data-id="2747" data-label="24" data-color="" data-thumb="" data-image="" data-has-image="" value="24">24</option>
    <option data-id="2748" data-label="25" data-color="" data-thumb="" data-image="" data-has-image="" value="25">25</option>
    <option data-id="2749" data-label="26" data-color="" data-thumb="" data-image="" data-has-image="" value="26">26</option>
    <option data-id="2750" data-label="27" data-color="" data-thumb="" data-image="" data-has-image="" value="27">27</option>
    <option data-id="2751" data-label="28" data-color="" data-thumb="" data-image="" data-has-image="" value="28">28</option>
    <option data-id="2752" data-label="29" data-color="" data-thumb="" data-image="" data-has-image="" value="29">29</option>
    <option data-id="2753" data-label="30" data-color="" data-thumb="" data-image="" data-has-image="" value="30">30</option>
</select>

Iхотел бы получить минимальное и максимальное значение, например valueMin = 15 и valueMax = 25, выбор будет обновлен следующим образом:

<select id="dp_larghezza" data-id="391" data-type="8"  class="form-control dp_entry dp_dropdown" data-name="larghezza"  data-label="Larghezza Esterna  L">
    <option  data-id="2738" data-label="15" data-color="" data-thumb="" data-image=""  data-has-image="" value="15">15</option>
    <option  data-id="2739" data-label="16" data-color="" data-thumb="" data-image=""  data-has-image="" value="16">16</option>
    <option  data-id="2740" data-label="17" data-color="" data-thumb="" data-image=""  data-has-image="" value="17">17</option>
    <option  data-id="2744" data-label="18" data-color="" data-thumb="" data-image=""  data-has-image="" value="18">18</option>
    <option  data-id="2743" data-label="19" data-color="" data-thumb="" data-image=""  data-has-image="" value="19">19</option>
    <option  data-id="2742" data-label="20" data-color="" data-thumb="" data-image=""  data-has-image="" value="20">20</option>
    <option  data-id="2741" data-label="21" data-color="" data-thumb="" data-image=""  data-has-image="" value="21">21</option>
    <option  data-id="2745" data-label="22" data-color="" data-thumb="" data-image=""  data-has-image="" value="22">22</option>
    <option  data-id="2746" data-label="23" data-color="" data-thumb="" data-image=""  data-has-image="" value="23">23</option>
    <option  data-id="2747" data-label="24" data-color="" data-thumb="" data-image=""  data-has-image="" value="24">24</option>
    <option  data-id="2748" data-label="25" data-color="" data-thumb="" data-image=""  data-has-image="" value="25">25</option>
</select>

Без потери идентификатора данных, метки данных и т. д.

Answer 1

Ваш код @empiric работает отлично, но можно ли скрыть / удалить параметр вне диапазона и восстановить начальные значения, если выбранное значение меньше 45 (например)?

$('#dp_larghezza').change(function() {

var larg = parseInt($('#dp_larghezza').find(":selected").text());
var prof = parseInt($('#dp_profondita').find(":selected").text());
var altez = parseInt($('#dp_altezza').find(":selected").text());

if (larg > 45 && prof < 11 && altez < 11){

var pmin = 10;
var pmax = 45;
var amin = 10;
var amax = 45;
$('#dp_profondita option').filter(function() {
  var val = $(this).val();
  return val < pmin || val > pmax;
}).prop('disabled', true);
$('#dp_altezza option').filter(function() {
  var val = $(this).val();
  return val < amin || val > amax;
}).prop('disabled', true);

} else if (larg > 45 && 10 <= prof < 46 && altez < 11){

var pmin = 10;
var pmax = 45;
var amin = 10;
var amax = 45;
$('#dp_profondita option').filter(function() {
  var val = $(this).val();
  return val < pmin || val > pmax;
}).prop('disabled', true);
$('#dp_altezza option').filter(function() {
  var val = $(this).val();
  return val < amin || val > amax;
}).prop('disabled', true);

} else if (larg > 45 && prof < 11 && 10 <= altez < 46){

var pmin = 10;
var pmax = 45;
var amin = 10;
var amax = 45;
$('#dp_profondita option').filter(function() {
  var val = $(this).val();
  return val < pmin || val > pmax;
}).prop('disabled', true);
$('#dp_altezza option').filter(function() {
  var val = $(this).val();
  return val < amin || val > amax;
}).prop('disabled', true);

}
$('#azzera_3').prop('checked', true);
$('#azzera_4').prop('checked', false);
});

 $('#dp_profondita').change(function() {

var larg = parseInt($('#dp_larghezza').find(":selected").text());
var prof = parseInt($('#dp_profondita').find(":selected").text());
var altez = parseInt($('#dp_altezza').find(":selected").text());

if (prof > 45 && larg < 11 && altez < 11){

var lmin = 10;
var lmax = 45;
var amin = 10;
var amax = 45;
$('#dp_larghezza option').filter(function() {
  var val = $(this).val();
  return val < lmin || val > lmax;
}).prop('disabled', true);
$('#dp_altezza option').filter(function() {
  var val = $(this).val();
  return val < amin || val > amax;
}).prop('disabled', true);

} else if (prof > 45 && 10 <= larg < 46 && altez < 11){

var lmin = 10;
var lmax = 45;
var amin = 10;
var amax = 45;
$('#dp_larghezza option').filter(function() {
  var val = $(this).val();
  return val < lmin || val > lmax;
}).prop('disabled', true);
$('#dp_altezza option').filter(function() {
  var val = $(this).val();
  return val < amin || val > amax;
}).prop('disabled', true);

} else if (prof > 45 && larg < 11 && 10 <= altez < 46){

var lmin = 10;
var lmax = 45;
var amin = 10;
var amax = 45;
$('#dp_larghezza option').filter(function() {
  var val = $(this).val();
  return val < lmin || val > lmax;
}).prop('disabled', true);
$('#dp_altezza option').filter(function() {
  var val = $(this).val();
  return val < amin || val > amax;
}).prop('disabled', true);

}
$('#azzera_3').prop('checked', true);
$('#azzera_4').prop('checked', false);
});

$('#dp_altezza').change(function() {

var larg = parseInt($('#dp_larghezza').find(":selected").text());
var prof = parseInt($('#dp_profondita').find(":selected").text());
var altez = parseInt($('#dp_altezza').find(":selected").text());

if (altez > 45 && larg < 11 && prof < 11){

var lmin = 10;
var lmax = 45;
var pmin = 10;
var pmax = 45;
$('#dp_larghezza option').filter(function() {
  var val = $(this).val();
  return val < lmin || val > lmax;
}).prop('disabled', true);
$('#dp_profondita option').filter(function() {
  var val = $(this).val();
  return val < pmin || val > pmax;
}).prop('disabled', true);

} else if (altez > 45 && 10 <= larg < 46 && prof < 11){

var lmin = 10;
var lmax = 45;
var pmin = 10;
var pmax = 45;
$('#dp_larghezza option').filter(function() {
  var val = $(this).val();
  return val < lmin || val > lmax;
}).prop('disabled', true);
$('#dp_profondita option').filter(function() {
  var val = $(this).val();
  return val < pmin || val > pmax;
}).prop('disabled', true);

} else if (altez > 45 && larg < 11 && 10 <= prof < 46){

var lmin = 10;
var lmax = 45;
var pmin = 10;
var pmax = 45;
$('#dp_larghezza option').filter(function() {
  var val = $(this).val();
  return val < lmin || val > lmax;
}).prop('disabled', true);
$('#dp_profondita option').filter(function() {
  var val = $(this).val();
  return val < pmin || val > pmax;
}).prop('disabled', true);

}
$('#azzera_3').prop('checked', true);
$('#azzera_4').prop('checked', false);
});

<select id="dp_larghezza" data-id="391" data-type="8" class="form-control dp_entry dp_dropdown" data-name="larghezza" data-label="Larghezza Esterna  L">
<option data-id="2733" data-label="10" data-color="" data-thumb="" data-image="" data-has-image="" value="10">10</option>
<option data-id="2734" data-label="11" data-color="" data-thumb="" data-image="" data-has-image="" value="11">11</option>
<option data-id="2735" data-label="12" data-color="" data-thumb="" data-image="" data-has-image="" value="12">12</option>
<option data-id="2736" data-label="13" data-color="" data-thumb="" data-image="" data-has-image="" value="13">13</option>
<option data-id="2737" data-label="14" data-color="" data-thumb="" data-image="" data-has-image="" value="14">14</option>
<option data-id="2738" data-label="15" data-color="" data-thumb="" data-image="" data-has-image="" value="15">15</option>
<option data-id="2739" data-label="16" data-color="" data-thumb="" data-image="" data-has-image="" value="16">16</option>
<option data-id="2740" data-label="17" data-color="" data-thumb="" data-image="" data-has-image="" value="17">17</option>
<option data-id="2744" data-label="18" data-color="" data-thumb="" data-image="" data-has-image="" value="18">18</option>
<option data-id="2743" data-label="19" data-color="" data-thumb="" data-image="" data-has-image="" value="19">19</option>
<option data-id="2742" data-label="20" data-color="" data-thumb="" data-image="" data-has-image="" value="20">20</option>
<option data-id="2741" data-label="21" data-color="" data-thumb="" data-image="" data-has-image="" value="21">21</option>
<option data-id="2745" data-label="22" data-color="" data-thumb="" data-image="" data-has-image="" value="22">22</option>
<option data-id="2746" data-label="23" data-color="" data-thumb="" data-image="" data-has-image="" value="23">23</option>
<option data-id="2747" data-label="24" data-color="" data-thumb="" data-image="" data-has-image="" value="24">24</option>
<option data-id="2748" data-label="25" data-color="" data-thumb="" data-image="" data-has-image="" value="25">25</option>
<option data-id="2749" data-label="26" data-color="" data-thumb="" data-image="" data-has-image="" value="26">26</option>
<option data-id="2750" data-label="27" data-color="" data-thumb="" data-image="" data-has-image="" value="27">27</option>
<option data-id="2751" data-label="28" data-color="" data-thumb="" data-image="" data-has-image="" value="28">28</option>
<option data-id="2752" data-label="29" data-color="" data-thumb="" data-image="" data-has-image="" value="29">29</option>
<option data-id="2753" data-label="30" data-color="" data-thumb="" data-image="" data-has-image="" value="30">30</option>
<option data-id="2754" data-label="31" data-color="" data-thumb="" data-image="" data-has-image="" value="31">31</option>
<option data-id="2755" data-label="32" data-color="" data-thumb="" data-image="" data-has-image="" value="32">32</option>
<option data-id="2756" data-label="33" data-color="" data-thumb="" data-image="" data-has-image="" value="33">33</option>
<option data-id="2757" data-label="34" data-color="" data-thumb="" data-image="" data-has-image="" value="34">34</option>
<option data-id="2758" data-label="35" data-color="" data-thumb="" data-image="" data-has-image="" value="35">35</option>
<option data-id="2759" data-label="36" data-color="" data-thumb="" data-image="" data-has-image="" value="36">36</option>
<option data-id="2760" data-label="37" data-color="" data-thumb="" data-image="" data-has-image="" value="37">37</option>
<option data-id="2761" data-label="38" data-color="" data-thumb="" data-image="" data-has-image="" value="38">38</option>
<option data-id="2762" data-label="39" data-color="" data-thumb="" data-image="" data-has-image="" value="39">39</option>
<option data-id="2763" data-label="40" data-color="" data-thumb="" data-image="" data-has-image="" value="40">40</option>
<option data-id="2764" data-label="41" data-color="" data-thumb="" data-image="" data-has-image="" value="41">41</option>
<option data-id="2765" data-label="42" data-color="" data-thumb="" data-image="" data-has-image="" value="42">42</option>
<option data-id="2766" data-label="43" data-color="" data-thumb="" data-image="" data-has-image="" value="43">43</option>
<option data-id="2767" data-label="44" data-color="" data-thumb="" data-image="" data-has-image="" value="44">44</option>
<option data-id="2768" data-label="45" data-color="" data-thumb="" data-image="" data-has-image="" value="45">45</option>
<option data-id="2769" data-label="46" data-color="" data-thumb="" data-image="" data-has-image="" value="46">46</option>
<option data-id="2770" data-label="47" data-color="" data-thumb="" data-image="" data-has-image="" value="47">47</option>
<option data-id="2771" data-label="48" data-color="" data-thumb="" data-image="" data-has-image="" value="48">48</option>
<option data-id="2772" data-label="49" data-color="" data-thumb="" data-image="" data-has-image="" value="49">49</option>
<option data-id="2773" data-label="50" data-color="" data-thumb="" data-image="" data-has-image="" value="50">50</option>
<option data-id="2774" data-label="51" data-color="" data-thumb="" data-image="" data-has-image="" value="51">51</option>
<option data-id="2775" data-label="52" data-color="" data-thumb="" data-image="" data-has-image="" value="52">52</option>
</select>
<select id="dp_profondita" data-id="392" data-type="8" class="form-control dp_entry dp_dropdown" data-name="profondita" data-label="Profondità Esterna  P">
<option data-id="2805" data-label="10" data-color="" data-thumb="" data-image="" data-has-image="" value="10">10</option>
<option data-id="2806" data-label="11" data-color="" data-thumb="" data-image="" data-has-image="" value="11">11</option>
<option data-id="2807" data-label="12" data-color="" data-thumb="" data-image="" data-has-image="" value="12">12</option>
<option data-id="2808" data-label="13" data-color="" data-thumb="" data-image="" data-has-image="" value="13">13</option>
<option data-id="2809" data-label="14" data-color="" data-thumb="" data-image="" data-has-image="" value="14">14</option>
<option data-id="2810" data-label="15" data-color="" data-thumb="" data-image="" data-has-image="" value="15">15</option>
<option data-id="2811" data-label="16" data-color="" data-thumb="" data-image="" data-has-image="" value="16">16</option>
<option data-id="2812" data-label="17" data-color="" data-thumb="" data-image="" data-has-image="" value="17">17</option>
<option data-id="2816" data-label="21" data-color="" data-thumb="" data-image="" data-has-image="" value="21">21</option>
<option data-id="2815" data-label="20" data-color="" data-thumb="" data-image="" data-has-image="" value="20">20</option>
<option data-id="2814" data-label="19" data-color="" data-thumb="" data-image="" data-has-image="" value="19">19</option>
<option data-id="2813" data-label="18" data-color="" data-thumb="" data-image="" data-has-image="" value="18">18</option>
<option data-id="2817" data-label="22" data-color="" data-thumb="" data-image="" data-has-image="" value="22">22</option>
<option data-id="2818" data-label="23" data-color="" data-thumb="" data-image="" data-has-image="" value="23">23</option>
<option data-id="2819" data-label="24" data-color="" data-thumb="" data-image="" data-has-image="" value="24">24</option>
<option data-id="2820" data-label="25" data-color="" data-thumb="" data-image="" data-has-image="" value="25">25</option>
<option data-id="2821" data-label="26" data-color="" data-thumb="" data-image="" data-has-image="" value="26">26</option>
<option data-id="2822" data-label="27" data-color="" data-thumb="" data-image="" data-has-image="" value="27">27</option>
<option data-id="2823" data-label="28" data-color="" data-thumb="" data-image="" data-has-image="" value="28">28</option>
<option data-id="2824" data-label="29" data-color="" data-thumb="" data-image="" data-has-image="" value="29">29</option>
<option data-id="2825" data-label="30" data-color="" data-thumb="" data-image="" data-has-image="" value="30">30</option>
<option data-id="2826" data-label="31" data-color="" data-thumb="" data-image="" data-has-image="" value="31">31</option>
<option data-id="2827" data-label="32" data-color="" data-thumb="" data-image="" data-has-image="" value="32">32</option>
<option data-id="2828" data-label="33" data-color="" data-thumb="" data-image="" data-has-image="" value="33">33</option>
<option data-id="2829" data-label="34" data-color="" data-thumb="" data-image="" data-has-image="" value="34">34</option>
<option data-id="2830" data-label="35" data-color="" data-thumb="" data-image="" data-has-image="" value="35">35</option>
<option data-id="2831" data-label="36" data-color="" data-thumb="" data-image="" data-has-image="" value="36">36</option>
<option data-id="2832" data-label="37" data-color="" data-thumb="" data-image="" data-has-image="" value="37">37</option>
<option data-id="2833" data-label="38" data-color="" data-thumb="" data-image="" data-has-image="" value="38">38</option>
<option data-id="2834" data-label="39" data-color="" data-thumb="" data-image="" data-has-image="" value="39">39</option>
<option data-id="2835" data-label="40" data-color="" data-thumb="" data-image="" data-has-image="" value="40">40</option>
<option data-id="2836" data-label="41" data-color="" data-thumb="" data-image="" data-has-image="" value="41">41</option>
<option data-id="2837" data-label="42" data-color="" data-thumb="" data-image="" data-has-image="" value="42">42</option>
<option data-id="2838" data-label="43" data-color="" data-thumb="" data-image="" data-has-image="" value="43">43</option>
<option data-id="2839" data-label="44" data-color="" data-thumb="" data-image="" data-has-image="" value="44">44</option>
<option data-id="2840" data-label="45" data-color="" data-thumb="" data-image="" data-has-image="" value="45">45</option>
<option data-id="2841" data-label="46" data-color="" data-thumb="" data-image="" data-has-image="" value="46">46</option>
<option data-id="2842" data-label="47" data-color="" data-thumb="" data-image="" data-has-image="" value="47">47</option>
<option data-id="2843" data-label="48" data-color="" data-thumb="" data-image="" data-has-image="" value="48">48</option>
<option data-id="2844" data-label="49" data-color="" data-thumb="" data-image="" data-has-image="" value="49">49</option>
<option data-id="2845" data-label="50" data-color="" data-thumb="" data-image="" data-has-image="" value="50">50</option>
<option data-id="2846" data-label="51" data-color="" data-thumb="" data-image="" data-has-image="" value="51">51</option>
<option data-id="2847" data-label="52" data-color="" data-thumb="" data-image="" data-has-image="" value="52">52</option>
</select>
<select id="dp_altezza" data-id="390" data-type="8" class="form-control dp_entry dp_dropdown" data-name="altezza" data-label="Altezza Esterna  H">
<option data-id="2661" data-label="10" data-color="" data-thumb="" data-image="" data-has-image="" value="10">10</option>
<option data-id="2662" data-label="11" data-color="" data-thumb="" data-image="" data-has-image="" value="11">11</option>
<option data-id="2663" data-label="12" data-color="" data-thumb="" data-image="" data-has-image="" value="12">12</option>
<option data-id="2664" data-label="13" data-color="" data-thumb="" data-image="" data-has-image="" value="13">13</option>
<option data-id="2665" data-label="14" data-color="" data-thumb="" data-image="" data-has-image="" value="14">14</option>
<option data-id="2666" data-label="15" data-color="" data-thumb="" data-image="" data-has-image="" value="15">15</option>
<option data-id="2667" data-label="16" data-color="" data-thumb="" data-image="" data-has-image="" value="16">16</option>
<option data-id="2668" data-label="17" data-color="" data-thumb="" data-image="" data-has-image="" value="17">17</option>
<option data-id="2672" data-label="21" data-color="" data-thumb="" data-image="" data-has-image="" value="21">21</option>
<option data-id="2671" data-label="20" data-color="" data-thumb="" data-image="" data-has-image="" value="20">20</option>
<option data-id="2670" data-label="19" data-color="" data-thumb="" data-image="" data-has-image="" value="19">19</option>
<option data-id="2669" data-label="18" data-color="" data-thumb="" data-image="" data-has-image="" value="18">18</option>
<option data-id="2673" data-label="22" data-color="" data-thumb="" data-image="" data-has-image="" value="22">22</option>
<option data-id="2674" data-label="23" data-color="" data-thumb="" data-image="" data-has-image="" value="23">23</option>
<option data-id="2675" data-label="24" data-color="" data-thumb="" data-image="" data-has-image="" value="24">24</option>
<option data-id="2676" data-label="25" data-color="" data-thumb="" data-image="" data-has-image="" value="25">25</option>
<option data-id="2677" data-label="26" data-color="" data-thumb="" data-image="" data-has-image="" value="26">26</option>
<option data-id="2678" data-label="27" data-color="" data-thumb="" data-image="" data-has-image="" value="27">27</option>
<option data-id="2679" data-label="28" data-color="" data-thumb="" data-image="" data-has-image="" value="28">28</option>
<option data-id="2680" data-label="29" data-color="" data-thumb="" data-image="" data-has-image="" value="29">29</option>
<option data-id="2681" data-label="30" data-color="" data-thumb="" data-image="" data-has-image="" value="30">30</option>
<option data-id="2682" data-label="31" data-color="" data-thumb="" data-image="" data-has-image="" value="31">31</option>
<option data-id="2683" data-label="32" data-color="" data-thumb="" data-image="" data-has-image="" value="32">32</option>
<option data-id="2684" data-label="33" data-color="" data-thumb="" data-image="" data-has-image="" value="33">33</option>
<option data-id="2685" data-label="34" data-color="" data-thumb="" data-image="" data-has-image="" value="34">34</option>
<option data-id="2686" data-label="35" data-color="" data-thumb="" data-image="" data-has-image="" value="35">35</option>
<option data-id="2687" data-label="36" data-color="" data-thumb="" data-image="" data-has-image="" value="36">36</option>
<option data-id="2688" data-label="37" data-color="" data-thumb="" data-image="" data-has-image="" value="37">37</option>
<option data-id="2689" data-label="38" data-color="" data-thumb="" data-image="" data-has-image="" value="38">38</option>
<option data-id="2690" data-label="39" data-color="" data-thumb="" data-image="" data-has-image="" value="39">39</option>
<option data-id="2691" data-label="40" data-color="" data-thumb="" data-image="" data-has-image="" value="40">40</option>
<option data-id="2692" data-label="41" data-color="" data-thumb="" data-image="" data-has-image="" value="41">41</option>
<option data-id="2693" data-label="42" data-color="" data-thumb="" data-image="" data-has-image="" value="42">42</option>
<option data-id="2694" data-label="43" data-color="" data-thumb="" data-image="" data-has-image="" value="43">43</option>
<option data-id="2695" data-label="44" data-color="" data-thumb="" data-image="" data-has-image="" value="44">44</option>
<option data-id="2696" data-label="45" data-color="" data-thumb="" data-image="" data-has-image="" value="45">45</option>
<option data-id="2697" data-label="46" data-color="" data-thumb="" data-image="" data-has-image="" value="46">46</option>
<option data-id="2698" data-label="47" data-color="" data-thumb="" data-image="" data-has-image="" value="47">47</option>
<option data-id="2699" data-label="48" data-color="" data-thumb="" data-image="" data-has-image="" value="48">48</option>
<option data-id="2700" data-label="49" data-color="" data-thumb="" data-image="" data-has-image="" value="49">49</option>
<option data-id="2701" data-label="50" data-color="" data-thumb="" data-image="" data-has-image="" value="50">50</option>
<option data-id="2702" data-label="51" data-color="" data-thumb="" data-image="" data-has-image="" value="51">51</option>
<option data-id="2703" data-label="52" data-color="" data-thumb="" data-image="" data-has-image="" value="52">52</option>
    </select>

Answer 2

Я комбинирую код, предложенный @empiric, для работы с тремя вариантами выбора со значениями опций от 10 до 80, поэтому, когда a a select имеет значение больше, чем 45, остальные два выбора имеют максимальное значение 45 (от 10 до 45).Но эта функция работает только один раз

 $(document).ready(function(){  

    /* Larghezza */

    $('#dp_larghezza, #dp_profondita, #dp_altezza').change(function() {

            $('#dp_larghezza option').prop('disabled', false);
            $('#dp_profondita option').prop('disabled', false);
            $('#dp_altezza option').prop('disabled', false);

        var larg = parseInt($('#dp_larghezza').find(":selected").text());
        var prof = parseInt($('#dp_profondita').find(":selected").text());
        var altez = parseInt($('#dp_altezza').find(":selected").text());

    if (larg <= 45 && prof <= 45 && altez <= 45){

        var pmin = 10;
        var pmax = 80;
        var amin = 10;
        var amax = 80;
        var lmin = 10;
        var lmax = 80;

    } else if (larg >= 45 && prof <= 45 && altez <= 45){

        var pmin = 10;
        var pmax = 45;
        var amin = 10;
        var amax = 45;
        var lmin = 10;
        var lmax = 80;

    } else if (larg <= 45 && prof >= 45 && altez <= 45){

        var pmin = 10;
        var pmax = 80;
        var amin = 10;
        var amax = 45;
        var lmin = 10;
        var lmax = 45;

    } else if (larg <= 45 && prof <= 45 && altez >= 45){

        var pmin = 10;
        var pmax = 45;
        var amin = 10;
        var amax = 80;
        var lmin = 10;
        var lmax = 45;

    }

        $('#dp_profondita option').filter(function() {
        var val = $(this).val();
        return val < pmin || val > pmax;
        }).prop('disabled', true);

        $('#dp_altezza option').filter(function() {
        var val = $(this).val();
        return val < amin || val > amax;
        }).prop('disabled', true);

        $('#dp_larghezza option').filter(function() {
        var val = $(this).val();
        return val < lmin || val > lmax;
        }).prop('disabled', true);

    });

});

Answer 3

В зависимости от того, как вы хотите, чтобы ваш выбор вел себя, вы можете сделать что-то вроде этого:

• отфильтровать все опции выбора со значением, которое меньше минимального и больше максимального
• отключите эту опцию (или спрячьте или удалите их)
• , так как это оставит первый вариант выбора, который вы могли бы рассмотреть, автоматически выбирая следующее возможное значение (например, $('select').val(min);)

var min = 15;
var max = 25;

$('select option').filter(function() {
  var val = $(this).val();
  return val < min || val > max;
}).prop('disabled', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dp_larghezza" data-id="391" data-type="8" class="form-control dp_entry dp_dropdown" data-name="larghezza" data-label="Larghezza Esterna  L">
  <option data-id="2733" data-label="10" data-color="" data-thumb="" data-image="" data-has-image="" value="10">10</option>
  <option data-id="2734" data-label="11" data-color="" data-thumb="" data-image="" data-has-image="" value="11">11</option>
  <option data-id="2735" data-label="12" data-color="" data-thumb="" data-image="" data-has-image="" value="12">12</option>
  <option data-id="2736" data-label="13" data-color="" data-thumb="" data-image="" data-has-image="" value="13">13</option>
  <option data-id="2737" data-label="14" data-color="" data-thumb="" data-image="" data-has-image="" value="14">14</option>
  <option data-id="2738" data-label="15" data-color="" data-thumb="" data-image="" data-has-image="" value="15">15</option>
  <option data-id="2739" data-label="16" data-color="" data-thumb="" data-image="" data-has-image="" value="16">16</option>
  <option data-id="2740" data-label="17" data-color="" data-thumb="" data-image="" data-has-image="" value="17">17</option>
  <option data-id="2744" data-label="18" data-color="" data-thumb="" data-image="" data-has-image="" value="18">18</option>
  <option data-id="2743" data-label="19" data-color="" data-thumb="" data-image="" data-has-image="" value="19">19</option>
  <option data-id="2742" data-label="20" data-color="" data-thumb="" data-image="" data-has-image="" value="20">20</option>
  <option data-id="2741" data-label="21" data-color="" data-thumb="" data-image="" data-has-image="" value="21">21</option>
  <option data-id="2745" data-label="22" data-color="" data-thumb="" data-image="" data-has-image="" value="22">22</option>
  <option data-id="2746" data-label="23" data-color="" data-thumb="" data-image="" data-has-image="" value="23">23</option>
  <option data-id="2747" data-label="24" data-color="" data-thumb="" data-image="" data-has-image="" value="24">24</option>
  <option data-id="2748" data-label="25" data-color="" data-thumb="" data-image="" data-has-image="" value="25">25</option>
  <option data-id="2749" data-label="26" data-color="" data-thumb="" data-image="" data-has-image="" value="26">26</option>
  <option data-id="2750" data-label="27" data-color="" data-thumb="" data-image="" data-has-image="" value="27">27</option>
  <option data-id="2751" data-label="28" data-color="" data-thumb="" data-image="" data-has-image="" value="28">28</option>
  <option data-id="2752" data-label="29" data-color="" data-thumb="" data-image="" data-has-image="" value="29">29</option>
  <option data-id="2753" data-label="30" data-color="" data-thumb="" data-image="" data-has-image="" value="30">30</option>
</select>