2020年新年大赛！

Question

wq55

Asked:2020-08-21 12:54:39 +0000 UTC2020-08-21 12:54:39 +0000 UTC 2020-08-21 12:54:39 +0000 UTC

带有条件的jquery中的onchange

772

提示 onchange 和条件的歧义

虽然绑onchange="causezpzchange()" к causezpzId(HTML 2)。

是否可以创建另一个 onchange 来引起（HTML 1）？或者如何解决？

如何返回原始列表。当$("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));，选择另一个后，每个人都显示相同的值=“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>

函数原因zpzchange(){

        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);
    }

}

请用三个案例告诉我

$('#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 个回答

Voted

OPTIMUS PRIME · Answer 1 · 2020-08-21T17:35:32Z

因为理想情况下你需要了解“纯”JS，即使你只用 jQuery 编写代码）

<элем onchange="..."this 和其他 onclick 事件属性等。只能有一个值。如果在代码中的其他地方为此元素编写另一个 onchange，那么最后一个将覆盖前一个的值，第一个将停止工作。

这段代码<элем id="bubu" onchange="код"等价于：

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

而且在功能之下，没有人会费心去;塞满你喜欢的附加功能。所以第一个问题的答案是：

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

但有时你厌倦了在 HTML 中编辑 JS，是时候将所有内容转移到脚本中了）
然后，一个更好的选择，而不是onchange编写addEventListener('change'). 然后，在代码中的任何地方，您都可以将许多相同的事件添加到一个元素，并且其中一个不会干扰另一个。

Ps 我已经编写了大约一年的代码，并且第一次遇到需要开关的真实示例））在这种情况下，数值是一种约定。如果将来选项的文本肯定不会改变，您可以完全删除该值并将到处的数字替换为选项的文本内容。

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>

Ps 虽然，如果选项的数量也没有改变，你可以通过一个 mat-expression 找出其余选项如何依赖于第一个选项并立即确定 who-where-how。无需进行切换。

带有条件的jquery中的onchange

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

带有条件的jquery中的onchange

1 个回答

相关问题