jQuery Chained Select TypeError：无法读取属性＆＃39; fn＆＃39;未定义的

时间：2016-07-16 04:29:43

标签： javascript jquery

我试图通过此链接http://www.appelsiini.net/projects/chained

进行3层链选择 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.4"      charset="utf-8"></script>
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.remote.js?v=0.9.4"      charset="utf-8"></script>

<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<select id="model" name="model">
  <option value="">--</option>
  <option value="coupe" class="series-3 series-6 a5">Coupe</option>
  <option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
  <option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
  <option value="sportback" class="a3 a5">Sportback</option>
</select>

<script language="JavaScript" type="text/javascript">
    var $ = jQuery.noConflict();
jQuery(document).ready(function($) {
    /* For $.chained.js */
    $("#series").chained("#mark");
    $("#model").chained("#series");
    $("#engine").chained("#series, #model");

    return;
    /* Show button after each pulldown has a value. */
    $("#engine").bind("change", function(event) {
        if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
            $("#button").fadeIn();
        } else {
            $("#button").hide();          
        }
    })
});
</script>

</html>

当我运行此代码时，我遇到一个问题，下拉列表无法链接并显示错误消息 TypeError：无法读取属性＆＃39; fn＆＃39;未定义。那么如何解决这个问题呢？感谢

2 个答案:

答案 0 :(得分：1)

  

您错过了第一个<script>的结束标记。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

其他明智的代码工作正常。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.4" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.remote.js?v=0.9.4" charset="utf-8"></script>

<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<select id="model" name="model">
  <option value="">--</option>
  <option value="coupe" class="series-3 series-6 a5">Coupe</option>
  <option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
  <option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
  <option value="sportback" class="a3 a5">Sportback</option>
</select>

<script language="JavaScript" type="text/javascript">
    var $ = jQuery.noConflict();
jQuery(document).ready(function($) {
    /* For $.chained.js */
    $("#series").chained("#mark");
    $("#model").chained("#series");
    $("#engine").chained("#series, #model");

    return;
    /* Show button after each pulldown has a value. */
    $("#engine").bind("change", function(event) {
        if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
            $("#button").fadeIn();
        } else {
            $("#button").hide();          
        }
    })
});
</script>

</html>

答案 1 :(得分：0)

关闭jquery include的脚本标记。一切都会按预期工作。

更改

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">

到

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.4" charset="utf-8"></script>
  <script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.remote.js?v=0.9.4" charset="utf-8"></script>

  <select id="mark" name="mark">
    <option value="">--</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </select>
  <select id="series" name="series">
    <option value="">--</option>
    <option value="series-3" class="bmw">3 series</option>
    <option value="series-5" class="bmw">5 series</option>
    <option value="series-6" class="bmw">6 series</option>
    <option value="a3" class="audi">A3</option>
    <option value="a4" class="audi">A4</option>
    <option value="a5" class="audi">A5</option>
  </select>
  <select id="model" name="model">
    <option value="">--</option>
    <option value="coupe" class="series-3 series-6 a5">Coupe</option>
    <option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
    <option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
    <option value="sportback" class="a3 a5">Sportback</option>
  </select>

  <script language="JavaScript" type="text/javascript">
    var $ = jQuery.noConflict();
    jQuery(document).ready(function($) {
      /* For $.chained.js */
      $("#series").chained("#mark");
      $("#model").chained("#series");
      $("#engine").chained("#series, #model");

      return;
      /* Show button after each pulldown has a value. */
      $("#engine").bind("change", function(event) {
        if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
          $("#button").fadeIn();
        } else {
          $("#button").hide();
        }
      })
    });
  </script>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题