用于多行插入的 JavaScrript 中带有“onchange”事件的双手依赖下拉菜单

编程问答 2022-05-31

问题描述

我正在尝试通过从两个相关下拉菜单中进行选择并动态添加行来创建用于将多行数据输入到数据库中的应用程序。我创建了一个函数 (populate1) 来根据类别选择激活子类别菜单。在代码的 html 部分，该函数使用“onchange”事件工作。我在 javascript 中调用它，但是当我动态添加新行时，该函数不会激活子类别菜单。调用（函数参数）中是否存在错误，或者是否可以像这样调用 javascript 中的函数？代码如下。请帮忙。

JavaScript：

<script>
    function populate1(s1,s2){
      var s1 = document.getElementById(s1);
      var s2 = document.getElementById(s2);
      s2.innerHTML = "";

      if (s1.value == "Zidanje") {
        var optionArray = ["|","Zidanje betonom 100kn|Zidanje betonom 100kn","Zidanje ciglom 80kn|Zidanje ciglom 80kn"];
      }else if (s1.value == "Zbukanje") {
        var optionArray = ["|","Rucno zbukanje 130kn|Rucno zbukanje 130kn","Strojno zbukanje 120kn|Strojno zbukanje 120kn"];
      }else if (s1.value == "Zavrsni radovi") {
        var optionArray = ["|","Ravnanje zidova 70kn|Ravnanje zidova 70kn","Bojanje zidova 50kn|Bojanje zidova 50kn"];
      }

      for (var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
      }
    }
  </script>

HTML 部分：

<td><select multiple id="vrsta_usluge" name="vrsta_usluge" onchange="populate1(this.id,'usluga')" class="form-control form-control-sm">
                        <option value=""></option>
                        <option value="Zidanje">Zidanje</option>
                        <option value="Zbukanje">Žbukanje</option>
                        <option value="Zavrsni radovi">Završni radovi</option>
                        </select>
                      </td>
                      <td>

JavaScript：

$(document).ready(function(){
        var final_total_amt = $('#final_total_amt').text();
        var count = 1;
        //Dodavanje redaka u kreiraj
        $(document).on('click','#add_row',function(){
          count++;
          $('#total_item').val(count);
          var html_code = '';
          html_code += '<tr id="row_id_'+count+'">';
          html_code += '<td><span id="sr_no">'+count+'</span></td>';
          
          html_code += '<td><select multiple name="vrsta_usluge[]" id="vrsta_usluge'+count+'" **onchange="populate1(this.id,"usluga");"** class="form-control form-control-sm"><option value=""></option><option value="Zidanje">Zidanje</option><option value="Zbukanje">Žbukanje</option><option value="Zavrsni radovi">Završni radovi</option></select></td>';

          html_code += '<td><select multiple name="usluga[]" id="usluga'+count+'" onchange="howmany();" class="form-control form-control-sm"><option value="Zidanje betonom 100kn"></option><option value="Zidanje ciglom 80kn"></option><option value="Rucno zbukanje 130kn"></option><option value="Strojno zbukanje 120kn"></option><option value="Ravnanje zidova 70kn"></option><option value="Bojanje zidova 50kn"></option></select></td>'; ...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dropdowndropdowneventseventseventsmenumenumenumultirowonchangeonchange