Question

我正在使用一些在几周前工作正常的代码，我从这里得到它并在使用之前进行检查。出于某种原因，它现在只适用于Chrome和Opera，甚至是jsfiddle上的原版。我确定我首先在Firefox中测试过，就像所有人一样。我完全不知所措。

第二次下拉选项应该取决于第一次选择。

<form id="formname" name="formname" method="post" action="submitform.asp" >
    <table width="50%" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td width="41%" align="right" valign="middle">Category1 :</td>
            <td width="59%" align="left" valign="middle">
                <select name="category1" id="category1">
                    <option value="">Select Category1</option>
                    <option value="home_ware">Home Ware</option>
                    <option value="education">Education</option>
                    <option value="books">Books</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right" valign="middle">Category2 :</td>
            <td align="left" valign="middle">
                <select disabled="disabled" id="category2" name="category2">
                    <option value>Select Category2</option>
                    <!-- Home Ware -->
                    <option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
                    <option rel="home_ware" value="audio-video">Audio/Video</option>
                    <option rel="home_ware" value="beddings">Beddings</option>
                    <option rel="home_ware" value="camera">Camera</option>
                    <option rel="home_ware" value="cell-phones">Cell Phones</option>
                    <!-- Education -->
                    <option rel="Education" value="Colleges">Colleges</option>
                    <option rel="Education" value="Institutes">Institutes</option>
                    <option rel="Education" value="Schools">Schools</option>
                    <option rel="Education" value="Tuitions">Tuitions</option>
                    <option rel="Education" value="Universities">Universities</option>
                    <!-- Books -->
                    <option rel="Books" value="College Books">College Books</option>
                    <option rel="Books" value="Engineering">Engineering</option>
                    <option rel="Books" value="Magazines">Magazines</option>
                    <option rel="Books" value="Medicine">Medicine</option>
                    <option rel="Books" value="References">References</option>
                </select>
            </td>
        </tr>
    </table>
</form>

$(function(){

    var $cat = $("#category1"),
        $subcat = $("#category2");

    $cat.on("change",function(){
        var _rel = $(this).val();
        $subcat.find("option").attr("style","");
        $subcat.val("");
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.find("[rel="+_rel+"]").show();
        $subcat.prop("disabled",false);
    });   
});

http://jsfiddle.net/v917ycp6/5/

Answer 1

您的代码适用于Firefox和Internet Explorer（未经过测试的Safari）。

请确保在代码执行之前包含jQuery 还要检查控制台是否有任何指向问题的错误如果javascript不在.js文件中，则javascript也必须位于<script>标记中。

如果这并不能随时提供更多详细信息。

P.S。我需要50点评论声望。所以我会提供这个作为答案，虽然它可能没有回答你的问题。

Answer 2

隐藏/显示选项在某些浏览器中可能会出现奇怪的行为。可能是由于相关API实现方式的不同。以下是使用previous answer中相同逻辑的示例。这应该适用于所有浏览器。

使用jQuery data（）在第一次选择中缓存而不是隐藏/显示选项。当第一个选项更改选项从此缓存中过滤并通过更新整个选项列表而不是显示/隐藏进行更新。

$(function() {

  $("#category1").on('change', function() {
    if (!$(this).data('options')) {
      $(this).data('options', $('#category2 option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[rel=' + id + ']');
    if (options.length) {
      $('#category2').html(options).prop('disabled', false);
    } else {
      $('#category2').html($('<option value>No subcategory found</option>')).prop('disabled', true);
    }

  });

});

#category2 option {
  display: none;
}
#category2 option.label {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formname" name="formname" method="post" action="submitform.asp">
  <table width="50%" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td width="41%" align="right" valign="middle">Category1 :</td>
      <td width="59%" align="left" valign="middle">
        <select name="category1" id="category1">
          <option value="">Select Category1</option>
          <option value="home_ware">Home Ware</option>
          <option value="Education">Education</option>
          <option value="Books">Books</option>
          <option value="Unknown">No subcategory</option>
        </select>
      </td>
    </tr>
    <tr>
      <td align="right" valign="middle">Category2 :</td>
      <td align="left" valign="middle">
        <select disabled="disabled" id="category2" name="category2">
          <option value>Select Category2</option>
          <!-- Home Ware -->
          <option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
          <option rel="home_ware" value="audio-video">Audio/Video</option>
          <option rel="home_ware" value="beddings">Beddings</option>
          <option rel="home_ware" value="camera">Camera</option>
          <option rel="home_ware" value="cell-phones">Cell Phones</option>
          <!-- Education -->
          <option rel="Education" value="Colleges">Colleges</option>
          <option rel="Education" value="Institutes">Institutes</option>
          <option rel="Education" value="Schools">Schools</option>
          <option rel="Education" value="Tuitions">Tuitions</option>
          <option rel="Education" value="Universities">Universities</option>
          <!-- Books -->
          <option rel="Books" value="College Books">College Books</option>
          <option rel="Books" value="Engineering">Engineering</option>
          <option rel="Books" value="Magazines">Magazines</option>
          <option rel="Books" value="Medicine">Medicine</option>
          <option rel="Books" value="References">References</option>

        </select>
      </td>
    </tr>
  </table>
</form>

Javascript / jQuery无法在Firefox，Safari和IE中运行。在Opera和Chrome中很好

2 个答案: