0

Подскажите неясности по onchange и условиям

Пока привязал onchange="causezpzchange()" к causezpzId(HTML 2).

Можно ли к cause(HTML 1) создать еще один onchange? Или как можно это решить?

Как чтобы возвращался список изначальный. Когда $("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>')); то после выбора другого у всех показывает этот же value="1" а нужно чтобы возвращался к первоначальному.

HTML 1

<select id="cause" name="causeId" 
onchange="document.getElementById('causeWarning').hidden = true;"><option value="0"></option><option value="1">4.1 А1</option> <option value="2">4.2 А2</option><option value="3">4.3 А3</option></select>

HTML 2

<select id="causezpzId" name="causezpzId" onchange="causezpzchange()">
<option value="0"></option> <option value="1">4.2 Об обеспечении</option><option value="2">4.3 О выборе А1</option><option value="3">4.4 О выборе А2</option>
</select>

HTML 3

<select id="rectif1zpzId" name="rectif1zpzId">
<option value="0"></option><option value="1">3.5.1 обеспечение</option><option value="2">3.5.2 о фальсификация</option><option value="3">3.5.3 иное</option>
</select>

HTML 4

<select id="rectif2zpzId" name="rectif2zpzId">
<option value="0"></option><option value="1">3.6.2.1 нарушение сроков</option><option value="2">3.6.2.2 иное</option><option value="3">3.7.2.1 возраст </option>
</select> 

function causezpzchange(){

        if($('#causezpzId').val() == '1'){
        $('#rectif1zpzId').attr("disabled",true);
        $('#rectif2zpzId').attr("disabled",true);
    }
    else if($('#causezpzId').val() == '2'){
        $("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));
        $('#rectif2zpzId').attr("disabled",true);
    }
    else if($('#causezpzId').val() == '3'){
        $("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));
        $("#rectif2zpzId").append( $('<option value="1">3.6.2.1 нарушение сроков</option>'));

    }

    else {
          $('#rectif1zpzId').val("");
          $('#rectif1zpzId').attr("disabled",false);
          $('#rectif2zpzId').val("");
          $('#rectif2zpzId').attr("disabled",false);
    }

}

Но в идеале хотелось бы, что-то подобное

function cause(){

    if($('#cause').val() == '1'){
        $("#causezpzId").append( $('<option value="1">4.2 Об обеспечении</option>'));
        $('#rectif1zpzId').attr("disabled",true);
        $('#rectif2zpzId').attr("disabled",true);
    }
    else if($('#cause').val() == '2'){
        $("#causezpzId").append( $('<option value="2">4.3 О выборе А1</option>'));
        $("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));
        $('#rectif2zpzId').attr("disabled",true);
    }
    else if($('#cause').val() == '3'){
        $("#causezpzId").append( $('<option value="3">4.4 О выборе А2</option>'));
        $("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));
        $("#rectif2zpzId").append( $('<option value="1">3.6.2.1 нарушение сроков</option>'));

    }

    else {
        $('#rectif1zpzId').val("");
          $('#rectif1zpzId').attr("disabled",false);
          $('#rectif2zpzId').val("");
          $('#rectif2zpzId').attr("disabled",false);
    }

}

Подскажите пожалуйста с тремя case

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

  switch ( $('#cause').val() ) {
    case "22":
         $("#causezpzId [value]"). hide();
          $("#causezpzId").append( $('<option value="14">4.2 Об </option>'));
          $("#causezpzId [value='14']").attr("selected", "selected");
          $("#rectif1zpzId [value]"). hide();
          $("#rectif2zpzId [value]"). hide();

      break
    case "23":
        $("#causezpzId [value]"). hide();
        $("#causezpzId").append( $('<option value="15">4.3 О выборе</option>'));
          $("#causezpzId [value='15']").attr("selected", "selected");
          $("#rectif1zpzId [value]"). hide();
          $("#rectif2zpzId [value]"). hide();
break
    case "24":
        $("#causezpzId [value]"). hide();
        $("#causezpzId").append( $('<option value="16">4.4 О выборе</option>'));
          $("#causezpzId [value='16']").attr("selected", "selected");
          $("#rectif1zpzId [value]"). hide();
          $("#rectif2zpzId [value]"). hide();
break
    case "25":
        $("#causezpzId [value]"). hide();
        $("#causezpzId").append( $('<option value="13">4.1 О выборе/замене</option>'));
          $("#causezpzId [value='13']").attr("selected", "selected");
          $("#rectif1zpzId [value]"). hide();
          $("#rectif2zpzId [value]"). hide();
break
    case "26":
        //$("#causezpzId").append( $('<option value="0"></option>'));
          $('#causezpzId').val("");
          $("#causezpzId [value]"). hide();
          $("#causezpzId").append( $('<option value="17">4.5 об организации </option>'));  

**НАПРИМЕР ЕСЛИ causezpzId=17 ТО rectif1zpzId ПОКАЗЫВАЛО VAL=1 И VAL=2
И НАПРИМЕР ЕСЛИ rectif1zpzId=1 ТО rectif2zpzId ПОКАЗЫВАЛО VAL=1** 


          $("#causezpzId").append( $('<option value="18">4.6 об оказании</option>'));
          $("#causezpzId").append( $('<option value="19">4.7 о проведении </option>'));
          $("#causezpzId").append( $('<option value="20">4.8 о каждом</option>'));
          $("#rectif1zpzId [value]"). hide();
          $("#rectif2zpzId [value]"). hide();

break


default:     
          $('#causezpzId').val("");
          $("#causezpzId [value]"). show();

          $('#rectif1zpzId').val("");
          $("#rectif1zpzId [value]"). show();

          $('#rectif1zpzId').val("");
          $("#rectif2zpzId [value]"). show();
}
}); 

1 ответ 1

2

Потому что в идеале нужно знать "чистый" JS, даже если кодите только на jQuery)

<элем onchange="..." этот и другие событийные атрибуты onclick и т.п. могут иметь только одно значение. Есле где-то в другом месте в коде написать еще один onchange для этого элемента, то последний перепишет значение предыдущего и первый перестанет работать.

А такой код <элем id="bubu" onchange="код" эквивалентен этому:

document.getElementById('bubu').onchange = function(){
  // код
}

А под функцию, никто не мешает через ; запихать сколько угодно дополнительных функций. Поэтому ответ на первый вопрос такой:

onchange="document.getElementById('causeWarning').hidden = true; cause(); ещеОдна();"

Но когда-то задолбает редактировать JS в HTML и будет пора всё переносить в скрипт)
И тогда, более удачный вариант, вместо onchange писать addEventListener('change'). Тогда где угодно в коде можно добавить на один элемент много одинаковых событий и одно не будет мешать другому.

P.s. примерно год что-то кодю, и впервые встречаю реальный пример, где нужен switch)) И в данном случае, числовые value - условность. Если текст опций в будущем точно не будет меняться, можно вообще убрать value и везде заменить числа на текстовое содержимое опций.

let cause = document.getElementById('cause');
cause.addEventListener('change', function() {
  document.getElementById('causeWarning').hidden = true;
  autoSelect();
});

function autoSelect() {
  switch ( $('#cause').val() ) {
    case "1":
      $("#causezpzId").val("1");
      $('#rectif1zpzId').val("").attr("disabled", true);
      $('#rectif2zpzId').val("").attr("disabled", true);
      break
    case "2":
      $("#causezpzId").val("2");
      $("#rectif1zpzId").val("1").attr("disabled", false);
      $('#rectif2zpzId').val("").attr("disabled", true);
      break
    case "3":
      $("#causezpzId").val("3");
      $("#rectif1zpzId").val("2").attr("disabled", false);
      $("#rectif2zpzId").val("1").attr("disabled", false);
      break
    default:
      $("#causezpzId").val("")
      $('#rectif1zpzId').val("").attr("disabled", false);
      $('#rectif2zpzId').val("").attr("disabled", false);
  }
}
select {
  display: block;
  margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="causeWarning">Warning!</span>
<select id="cause" name="causeId">
  <option value="0"></option>
  <option value="1">4.1 А1</option>
  <option value="2">4.2 А2</option>
  <option value="3">4.3 А3</option>
</select>

<select id="causezpzId" name="causezpzId">
  <option value="0"></option>
  <option value="1">4.2 Об обеспечении</option>
  <option value="2">4.3 О выборе А1</option>
  <option value="3">4.4 О выборе А2</option>
</select>

<select id="rectif1zpzId" name="rectif1zpzId">
  <option value="0"></option>
  <option value="1">3.5.1 обеспечение</option>
  <option value="2">3.5.2 о фальсификация</option>
  <option value="3">3.5.3 иное</option>
</select>

<select id="rectif2zpzId" name="rectif2zpzId">
  <option value="0"></option>
  <option value="1">3.6.2.1 нарушение сроков</option>
  <option value="2">3.6.2.2 иное</option>
  <option value="3">3.7.2.1 возраст </option>
</select>

P.s. хотя, если кол-во опций тоже не будет меняться, можно придумать, как остальные опции зависят от первой и через одно мат-выражение сразу определять, кто-где-как. Не делая switch.

8
  • Как можно реализовать case в case?
    – wq55
    22 авг 2019 в 3:04
  • Если точнее то тройной case
    – wq55
    22 авг 2019 в 5:03
  • @wq55 можно записать в столбик, case "1": (новая строка) case "2": (новая строка) case "3": Общий код для всех значений. 22 авг 2019 в 6:02
  • Можно пример. (добавил в сообщение скрипт) НАПРИМЕР ЕСЛИ causezpzId=17 ТО rectif1zpzId ПОКАЗЫВАЛО VAL=1 И VAL=2 И НАПРИМЕР ЕСЛИ rectif1zpzId=1 ТО rectif2zpzId ПОКАЗЫВАЛО VAL=1
    – wq55
    22 авг 2019 в 6:30
  • @wq55 тогда придется добавлять и удалять атрибут size у селекта... $('select').attr('size', 2); — чтобы одновременно показывал два значения. А это - муторно. Не легче ли сделать обычный div вместо селекта, скрыть все внутренние блоки, а при нужных значениях - показывать сколько угодно блоков? А при клике на div - также показывать все внутренние блоки-опции, как в селекте. 22 авг 2019 в 8:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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