Question

我的问题是我在prestashop（1.6.1.9）CMS页面工作，我不允许将任何脚本放入cms页面源代码。（我不使用iframe，这不是一个解决方案）.. 所以我有一个下拉菜单，下拉菜单上的每个链接都链接到某个页面。我想使用java脚本函数来执行此操作。但是因为我不能像这个例子那样在页面上调用java-script，＆lt; select id =“selectdrops”name =“newurl”onchange =“menu_goto（this.form）”＆gt; ＆lt; option value =“/ index.html”＆gt; Home＆lt; / option＆gt; ＆lt; option value =“/ feedback.html”＆gt;反馈＆lt; /选项＆gt; ＆lt; option value =“/ links.html”＆gt;相关链接＆lt; / option＆gt; ＆LT; /选择＆GT; 我想让我的javascript专注于下拉列表'ID'，如果可能的话？删除：menu_goto（this.form）我想通过关注选择“ID”来完成目标链接。我的.js看起来像这样： $（document）.ready（function（）{ $（document）.on（'change'，'＃dropSelectAbout'，function（e）{ e.preventDefault（）; menu_goto（）; }）; $（document）.ready（function（）{ $（“a”）。click（function（event）{ 警报（event.target.id）; }）; }）; }）; 功能menu_goto（menuform） { var baseurl = window.document.location.protocol +'//'+ window.document.location.host; selecteditem = menuform.newurl.selectedIndex; newurl = menuform.newurl.options [selecteditem] .value; if（newurl.length！= 0）{ location.href = baseurl + newurl; } }

Answer 1

我建议进行以下更改;

$(document).on('change', '#selectdrops', function (e) {
       e.preventDefault();
       menu_goto(e.target.value);
    });
})

function menu_goto( newurl ) {
    var baseurl = window.document.location.protocol + '//' + window.document.location.host;

    if (newurl.length != 0) {
        window.location = baseurl + newurl ;
    }
}

已删除:(以下脚本已删除，因为它会定位页面上的所有＆lt; a＆gt;标记，这会在点击链接时创建弹出对话框消息，因此顶部的功能只需要专注于我的脚本下拉列表，其中id =“selectdrops”）

    $(document).ready(function() {
        $("a").click(function(event) {
           alert(event.target.id);
        });
    });

e.target.value会为您提供所选的选项，因此您可以将该值直接传递到menu_goto函数中。
location没有ref属性，因此如果打算重定向到新构建的网址，则使用window.location。

Answer 2

如果您想重定向更改（不是在点击按钮后），您可以使用此脚本：

$(document).ready(function () {

    $(document).on('change', '#selectdrops', function (e) {
            e.preventDefault();
            menu_goto(this);
        });

});

function menu_goto( menuform )
{
    if(menuform == null)
        return;

    newurl = $(menuform).val() ;

    if (newurl.length != 0) {
        location.href = baseUri + newurl ;
    }
}

您可以使用Prestashop用来获取商店网址的baseUri变量。这对子域更有效。然后在没有/的情况下设置选择中的链接（它已经在baseUri中）。

编辑：要使用按钮，请单击：

$(document).ready(function () {

    $(document).on('click', '#golink', function (e) {
            e.preventDefault();
            menu_goto();
        });

});

function menu_goto()
{
    var menuform = $('#selectdrops');

    if(menuform == null)
        return;

    newurl = menuform.val() ;

    if (newurl.length != 0) {
        location.href = baseUri + newurl ;
    }
}

在这种情况下，要执行的按钮链接必须具有id golink。

Answer 3

您忘记将表单作为menu_goto函数的参数传递（也是选择器为false。以下是更正后的代码：

$(document).ready(function() {

  $(document).on('change', '#selectdrops', function(e) {
    e.preventDefault();
    menu_goto(this.form);
  });

  $(document).ready(function() {
    $("a").click(function(event) {
      alert(event.target.id);
    });
  });

});

function menu_goto(menuform) {
  var baseurl = window.document.location.protocol + '//' + window.document.location.host;
  selecteditem = menuform.newurl.selectedIndex;
  newurl = menuform.newurl.options[selecteditem].value;
  if (newurl.length != 0) {
    location.href = baseurl + newurl;
  }
}

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<form>
  <select id="selectdrops" name="newurl">
    <option value="/index.html">Home</option>
    <option value="/feedback.html">Feedback</option>
    <option value="/links.html">Related Links</option>
  </select>
</form>

Javascript链接到<select> id

3 个答案: