Onchange в jquery при условиях

119
11 июня 2021, 18:20

Подскажите неясности по 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();
}
}); 
Answer 1

Потому что в идеале нужно знать "чистый" 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.

READ ALSO
Проблемы с выводом содержимого на странице

Проблемы с выводом содержимого на странице

На всех страницах сайта все сжимается под размер экрана и отображается нормально(пример на 1 картинке)Но на одной странице контент не подстраивается...

95
Где хранить данные клиента?

Где хранить данные клиента?

Я работаю сnet mvc core, и хоче реализовать данные о просмотренности форума, т

104
Регулярка на шарпе находит лишнее

Регулярка на шарпе находит лишнее

Есть такой текст: GET /?code=KYTW/9Bjv7m7OhrXmuZd50PuvRq5b4TVi3GIH5ZXOVl59XQL8yMAhuC2IqS7XIsxSQauZA==&state= HTTP/11

95
Сортировка вложенных объектов

Сортировка вложенных объектов

Есть сущность Request

77