Question

我有一个链式选择，允许用户根据学年＆gt;＆gt;选择他/她希望下载的文件。受试者（根据所选年份）＆gt;＆gt;然后用户点击＆＃34;下载＆＃34;下载在外部地址（如谷歌）上找到的链接文件。

添加脚本后，＆＃34;应该＆＃34;将用户转移到外部地址所有我正在打开我所在的同一页面的新标签/页面（类似于刷新），除了网址栏中的地址是

www..../acyear=firstyear&subj=http%3A%2F%2Fwww.google.com&download=Download

提交按钮脚本

$(document).ready(function() {

    $("#subj").chained("#acyear");

    $("#download").on("click", function(e){

      e.preventDefault();

      $(this).attr('target', '_blank');

      window.open($("#subj").val());

    });

  });

这是在将代码和脚本添加到主页之后发生的，我希望将它们包含在内，其中包含附加的 css表和jqueries ，用于某些效果（如幻灯片/导航栏..）

我还在提交按钮和选择标记中添加了一些 CSS样式，也许这就是原因？不确定问题出在哪里，因为它在一个简单的html页面上运行得很好....

这里是表单和脚本的完整代码 ...

<form name="monitoring-report" action="" method="get" target="_blank" onsubmit="return validate_form()">                  

      <select name="acyear" id="acyear">

        <option value="">Academic Year</option>

        <option value="firstyear">1st Year</option>

        <option value="secondyear">2nd Year</option>

        <option value="thirdyear">3rd Year</option>

        <option value="fourthyear">4th Year</option>

        <option value="fifthyear">5th Year</option>

      </select>



      <select name="subj" id="subj">

        <option selected >Please select a Subject</option>

        <option value="http://www.google.com" class="firstyear">Select Subject</option>

        <option value="http://www.imejo.co.nf/books.html" class="firstyear">Calculus101</option>

        <option value="http://www.google.com" class="firstyear">Calculus102</option>

        <option value="http://www.google.com" class="firstyear">Physics101</option>

        <option value="http://www.google.com" class="firstyear">Physics102</option>

        <option value="http://www.google.com" class="firstyear">Chemistry101</option>

        <option value="http://www.google.com" class="firstyear">Chemistry102</option>

        <option value="http://www.google.com" class="firstyear">Engineering Workshops </option>

        <option value="http://www.google.com" class="firstyear">Chemistry102</option>

        <option value="http://www.google.com" class="firstyear">English111</option>

        <option value="http://www.google.com" class="firstyear">English112</option>

        <option value="http://www.google.com" class="firstyear">Computer Skills</option>



        <!--second year-->

        <option selected >Please select a Subject</option>

        <option value="http://www.google.com" class="secondyear">Select Subject</option>

        <option value="http://www.imejo.co.nf/books.html" class="firstyear">Statics</option>

        <option value="http://www.google.com" class="secondyear">Dynamics</option>

        <option value="http://www.google.com" class="secondyear">Strength of Materials</option>

        <option value="http://www.google.com" class="secondyear">Engineering Drawing B</option>

        <option value="http://www.google.com" class="secondyear">Physics Lab</option>

        <option value="http://www.google.com" class="secondyear">C++</option>

        <option value="http://www.google.com" class="secondyear">Mechanical Drawing </option>

        <option value="http://www.google.com" class="secondyear">Differential Equations</option>

        <option value="http://www.google.com" class="secondyear">Intermediate Analysis</option>


    //same goes for 3rd,4th and 5th year



    <script>

      // Chained - jQuery non AJAX(J) chained selects plugin

      (function($) {

        $.fn.chained = function(parent_selector, options) { 

          return this.each(function() {

            var self   = this;

            var backup = $(self).clone();

            $(parent_selector).each(function() {

              $(this).bind("change", function() {

                $(self).html(backup.html());

                var selected = "";

                $(parent_selector).each(function() {

                  selected += "\\" + $(":selected", this).val();

                });

                selected = selected.substr(1);

                var first = $(parent_selector).first();

                var selected_first = $(":selected", first).val();

                $("option", self).each(function() {

                if (!$(this).hasClass(selected) && !$(this).hasClass(selected_first) && $(this).val() !== "") {

                  $(this).remove();

                }                        

              });

              if (1 == $("option", self).size() && $(self).val() === "") {

                $(self).attr("disabled", "disabled");

              } else {

                $(self).removeAttr("disabled");

              }

              $(self).trigger("change");

            });

            if ( !$("option:selected", this).length ) {

              $("option", this).first().attr("selected", "selected");

            }

            $(this).trigger("change");             

          });

        });

      };

      $.fn.chainedTo = $.fn.chained;

      })(jQuery);



      $(document).ready(function() {

        $("#subj").chained("#acyear");

        $("#download").on("click", function(e){

          e.preventDefault();

          $(this).attr('target', '_blank');

          window.open($("#subj").val());

        });

      });

    </script>

Answer 1

在JS检查之后，我显然附有一个损坏的JS文件，或者至少它有一些错误文件是 http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

删除后，脚本运行完美！

PS：Google Chrome上的JavaScript控制台非常棒！

链接选择提交按钮STOPPED正常运行

1 个答案: