1

Добрый день. Столкнулся с проблемой, не могу проверить. На входе имеем следующую форму калькулятора:

<FORM Name="myform" class="calcform">
    <SELECT NAME="width" onChange="calculatePrice()" id="width">
        <OPTION value="20">20 см.</OPTION>
        <OPTION value="30">30 см.</OPTION>
        <OPTION value="40">40 см.</OPTION>
        <OPTION value="50">50 см.</OPTION>
        <OPTION value="60">60 см.</OPTION>
        <OPTION value="70">70 см.</OPTION>
        <OPTION value="80">80 см.</OPTION>
        <OPTION value="90" style="display: inline-block;">90 см.</OPTION>
        <OPTION value="100" style="display: inline-block;">100 см.</OPTION>
        <OPTION value="110" style="display: inline-block;">110 см.</OPTION>
        <OPTION value="120" style="display: inline-block;">120 см.</OPTION>
        <OPTION value="130" style="display: inline-block;">130 см.</OPTION>
        <OPTION value="140" style="display: inline-block;">140 см.</OPTION>
        <OPTION value="150" style="display: inline-block;">150 см.</OPTION>
        <OPTION value="160" style="display: inline-block;">160 см.</OPTION>
        <OPTION value="170" style="display: inline-block;">170 см.</OPTION>
        <OPTION value="180" style="display: inline-block;">180 см.</OPTION>
        <OPTION value="190" style="display: inline-block;">190 см.</OPTION>
        <OPTION value="200" style="display: inline-block;">200 см.</OPTION>
    </SELECT>

    <SELECT NAME="height" onChange="calculatePrice()" id="height">
        <OPTION value="20">20 см.</OPTION>
        <OPTION value="30">30 см.</OPTION>
        <OPTION value="40">40 см.</OPTION>
        <OPTION value="50">50 см.</OPTION>
        <OPTION value="60">60 см.</OPTION>
        <OPTION value="70">70 см.</OPTION>
        <OPTION value="80">80 см.</OPTION>
        <OPTION value="90" style="display: inline-block;">90 см.</OPTION>
        <OPTION value="100" style="display: inline-block;">100 см.</OPTION>
        <OPTION value="110" style="display: inline-block;">110 см.</OPTION>
        <OPTION value="120" style="display: inline-block;">120 см.</OPTION>
        <OPTION value="130" style="display: inline-block;">130 см.</OPTION>
        <OPTION value="140" style="display: inline-block;">140 см.</OPTION>
        <OPTION value="150" style="display: inline-block;">150 см.</OPTION>
        <OPTION value="160" style="display: inline-block;">160 см.</OPTION>
        <OPTION value="170" style="display: inline-block;">170 см.</OPTION>
        <OPTION value="180" style="display: inline-block;">180 см.</OPTION>
        <OPTION value="190" style="display: inline-block;">190 см.</OPTION>
        <OPTION value="200" style="display: inline-block;">200 см.</OPTION>
    </SELECT>

    Стоимость:
    <INPUT value="0" disabled="disabled" type="text" id="PicExtPrice" Size=8>грн.
</FORM>

Не получается реализовать код, чтобы при выборе в первом SELECT с id="width", option с value > 80 - во втором SELECT с id="height" все option с value > 80 прятать. И соответственно наоборот.

$(document).ready(function() {
$("select").on("change", function() {
  var id = $(this).attr('id');

  if ((id == 'height')) {
    if ($("#height option:selected").val() > 80) {
      $("#width option").each(function() {
        if ($(this).val > 80) {
          $(this).hide();
        }
        if ($("#width option:selected").val() > 80) {
          if ($(this).val() == '80') {
            $(this).prop("selected", 'selected');
          }
        }
      });
    } else {
      $("#width option").each(function() {
        $(this).show();
      });
    }
  }

  if ((id == 'width')) {
    if ($("#width option:selected").val() > 80) {
      $("#height option").each(function() {
        if ($(this).val() > 80) {
          $(this).hide();
        }
        if ($("#height option:selected").val() > 80) {
          if ($(this).val() == '80') {
            $(this).prop("selected", 'selected');
          }
        }
      });
    } else {
      $("#height option").each(function() {
        $(this).show();
      });
    }
  }
});
});

Проблема в том, что скрипт работает только для первого селекта, если во втором выбрать значение > 80, то в первом ни один OPTION не будет прятаться.

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 17 ноя 2016 в 6:41

1 ответ 1

1

А, пардон:

  $("#width option").each(function() {
    if ($(this).val > 80) { // missing () after val

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.