Question

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

我已经知道在加载页面时最初会触发该函数，但它不会影响select标签或之后被触发。

我知道一定有什么不对，否则它会起作用。但它似乎是特定的野生动物园。由于我只是使用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 * selector

的错误消息

编辑 - console.log

$(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);

});

Safari不执行jQuery功能

0 个答案: