jquery - Safari 不执行 jQuery 函数

Question

我有一个带有 2 个下拉框的表单。第一个框的选择会影响第二个框的输出。 jQuery 在 chrome 和 firefox 中工作，但我不知道为什么它在 safari 中不起作用。

我发现该函数最初是在加载页面时触发的，但它不会影响选择标签或之后触发。

我知道肯定有问题，否则它会起作用。但这似乎是特定于 Safari 的。由于我只是刚开始使用 jQuery，对于这个模糊的问题我深表歉意，但过去几天我一直在努力解决这个问题。

我的问题是哪里出了问题？

safari的版本是9.

这是最初触发但之后不会影响表单的功能。

$(function(){

$("#groups").on('change', function(){
    var val = $(this).val();
    var sub = $("#sub_groups");
    $("option", sub).filter(function(){
        if (
             $(this).attr("data-group") === val
          || $(this).attr("data-group") === "SHOW"
        ) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});
$("#groups").trigger('change');

});

这是它应该影响的表

<table id="quote_form_table"border="1" style="border-collapse:collapse;border:1px solid #000000;width:100%" cellpadding="3" cellspacing="3">
                <tr>
                        <th class="quantitiyH">Quantity</th>
                        <th class="other">Item</th>
                        <th class="other">Unit Type</th>
                    </tr>
                    <tr>
                    <td class="hidden"><input type="text" name="H1" value="active"></td>
                        <td><input class="input " type="number" name="Q1" min="1" max="200"></td>
                        <td><select name="P1" id="groups">
                      <option value="none">None</option>
                      <option value="Health & Safety Signs">Health & Safety Signs</option>
                      <option value="Portable Displays & Counters">Portable Displays & Counters</option>
                      <option value="Roller Banner">Roller Banner</option>
                      <option value="Canvas Printing">Canvas Printing</option>
                      <option value="Exterior Signs">Exterior Signs</option>
                      <option value="Exibition Design & Instalation">Exibition Design & Insalation</option>
                        </select>
                      </td>
                        <td>
                      <select name="T1" id="sub_groups" >
                        <option data-group='SHOW' value='0'>-- Select --</option>
                        <option data-group='Health & Safety Signs' value='Di Bond'>Di Bond</option>
                        <option data-group='Health & Safety Signs' value='PVC'>PVC</option>
                        <option data-group='Health & Safety Signs' value='Self Adhesive'>Self Adhesive</option>
                        <option data-group='Health & Safety Signs' value='Floor Vinyls'>Floor Vinyls</option>

                          <option data-group='Portable Displays & Counters' value='Pop up Display'>Pop up Display</option>
                          <option data-group='Portable Displays & Counters' value='Table & Case to counter'>Table & Case to counter</option>
                          <option data-group='Portable Displays & Counters' value='Replacement Graphics'>Replacement Graphics</option>

                            <option data-group='Roller Banner' value='Grass Hopper'>Grass Hopper</option>
                            <option data-group='Roller Banner' value='Excalibur'>Excalibur</option>
                            <option data-group='Roller Banner' value='Replacement Graphics'>Replacement Graphics</option>

                              <option data-group='Canvas Printing' value='Standard'>Standard</option>
                              <option data-group='Canvas Printing' value='Waterproof Latex'>Waterproof latex</option>
                              <option data-group='Canvas Printing' value='Photo Realistic'>Photo Realistic</option>

                                <option data-group='Exterior Signs' value='Full Color'>Full Color</option>
                                <option data-group='Exterior Signs' value='Vinyl Cut'>Vinyl Cut</option>
                                <option data-group='Exterior Signs' value='Gloss Laminate'>Gloss Laminate</option>

                                  <option data-group="Exibition Design & Instalation" value='Standard'>Standard</option>
                                  </select>
                                </td>
                    </tr>
                </table>
                <br>
                  <button type="button"onclick="addrow()">Add Row</button>
                  <button type="button"onclick="removerow()">Remove Row</button>

我知道内联 css 和使用 ID 不是最好的，我会在之后整理它们。

编辑——只显示错误消息是针对 css * 选择器的

编辑——控制台日志

$(function(){
  console.log(1);
  $("#groups").on('change', function(){
    console.log(2);
    var val = $(this).val();
    console.log(3);
    var sub = $("#sub_groups");
    console.log(4);
 $("option", sub).filter(function(){
    if (
         $(this).attr("data-group") === val
      || $(this).attr("data-group") === "SHOW"
    ) {  
      console.log(5);
        $(this).show();
    } else {  console.log(6);
        $(this).hide();
    }
      console.log(7);
    });
    });
      console.log(8);
       $("#groups").trigger('change');
      console.log(9);

});

Answer 1

我已经对您的功能进行了一些更改，并且效果很好。

$(function() {  
  var removedElement="";
  $("#groups").change(function() {
    $("#sub_groups").append(removedElement);
    var val = $(this).val();    
    removedElement = $("#sub_groups option").filter(function(i) {              
        return (!($(this).data("group") == val || $(this).data("group") == "SHOW"));      
    }).remove();    
  });   
});

<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<table id="quote_form_table" border="1" style="border-collapse:collapse;border:1px solid #000000;width:100%" cellpadding="3" cellspacing="3">
  <tr>
    <th class="quantitiyH">Quantity</th>
    <th class="other">Item</th>
    <th class="other">Unit Type</th>
  </tr>
  <tr>
    <td class="hidden">
      <input type="text" name="H1" value="active">
    </td>
    <td>
      <input class="input " type="number" name="Q1" min="1" max="200">
    </td>
    <td>
      <select name="P1" id="groups">
        <option value="none">None</option>
        <option value="Health & Safety Signs">Health & Safety Signs</option>
        <option value="Portable Displays & Counters">Portable Displays & Counters</option>
        <option value="Roller Banner">Roller Banner</option>
        <option value="Canvas Printing">Canvas Printing</option>
        <option value="Exterior Signs">Exterior Signs</option>
        <option value="Exibition Design & Instalation">Exibition Design & Insalation</option>
      </select>
    </td>
    <td>
      <select name="T1" id="sub_groups">
        <option data-group='SHOW' value='0'>-- Select --</option>
        <option data-group='Health & Safety Signs' value='Di Bond'>Di Bond</option>
        <option data-group='Health & Safety Signs' value='PVC'>PVC</option>
        <option data-group='Health & Safety Signs' value='Self Adhesive'>Self Adhesive</option>
        <option data-group='Health & Safety Signs' value='Floor Vinyls'>Floor Vinyls</option>

        <option data-group='Portable Displays & Counters' value='Pop up Display'>Pop up Display</option>
        <option data-group='Portable Displays & Counters' value='Table & Case to counter'>Table & Case to counter</option>
        <option data-group='Portable Displays & Counters' value='Replacement Graphics'>Replacement Graphics</option>

        <option data-group='Roller Banner' value='Grass Hopper'>Grass Hopper</option>
        <option data-group='Roller Banner' value='Excalibur'>Excalibur</option>
        <option data-group='Roller Banner' value='Replacement Graphics'>Replacement Graphics</option>

        <option data-group='Canvas Printing' value='Standard'>Standard</option>
        <option data-group='Canvas Printing' value='Waterproof Latex'>Waterproof latex</option>
        <option data-group='Canvas Printing' value='Photo Realistic'>Photo Realistic</option>

        <option data-group='Exterior Signs' value='Full Color'>Full Color</option>
        <option data-group='Exterior Signs' value='Vinyl Cut'>Vinyl Cut</option>
        <option data-group='Exterior Signs' value='Gloss Laminate'>Gloss Laminate</option>

        <option data-group="Exibition Design & Instalation" value='Standard'>Standard</option>
      </select>
    </td>
  </tr>
</table>
<br>
<button type="button" onclick="addrow()">Add Row</button>
<button type="button" onclick="removerow()">Remove Row</button>