选择选项标记后，如何导航到另一个页面，然后自动运行jQuery函数

When an option tag is selected, how do you navigate to another page and then run a jQuery function automatically?

本文关键字：然后 另一个 jQuery 运行 函数 导航 选项 何导航 选择      更新时间：2023-09-26

我正在使用HTML5、jQuery和Javascript创建一个寻路应用程序。共有3个html页面，每个页面都有不同的图例。在这个应用程序中，我有一些按钮可以调用jQuery点击功能，在你选择的位置上方的地图上显示星星。每个按钮都有一个id，按钮按照我希望的方式工作。问题是，我想添加一个下拉列表，该列表将提供与图例上的按钮相同的功能。所以基本上，我想做的是从下拉列表中选择一个部分，然后跳到有该部分的页面，并为所选部分显示星号。IE：如果我选择洗手间，我希望能够跳到一楼，并在洗手间上方显示星星。这样做可能吗？我尝试使用Javascript函数使URL导航到我想要的选择列表选项的值，但这并没有使星号显示出来。我是Javascript和jQuery的新手，所以请帮忙。谢谢这是我的代码：

HTML:

<form method="get" name="form1" action="">  
 <select name="locations" onchange="gotoSection(this.form)">
      <option selected>Please pick a Section</option>
      <option disabled>---Ground Floor---</option>
      <option value="grdFloor.html#mc" >Mayor's Commision on Literacy</option>
      <option value="grdFloor.html#ch">Children's</option>
      <option value="grdFloor.html#sr">Story Book Room</option>
      <option value="grdFloor.html#eo">Extensions Office</option>
      <option value="grdFloor.html#ma">Montgomery Auditorium</option>
      <option value="grdFloor.html#restRm">Restrooms</option>     
  </select>
</form>
<div id="restRm" class="legend">
    <a href="#restRm" ><img src="floorMaps/restBTN.png"/></a>
</div>

jQuery:

$(document).ready(function(){
   $('.legend, .arrows').show('slow');                     
   $('.stars').hide();
       $('#restRm').click(function(){
    $('.stars:not(#restStar1, #restStar2)').fadeOut('slow');
    $('#restStar1, #restStar2').toggle('pulsate');
   }); //end restroom

Javascript：

function gotoSection(form) { 
    var newIndex = form.locations.selectedIndex; 
    if ( newIndex == 0 ) { 
        alert( "Please select a Section!" ); 
    } else { 
        cururl = form.locations.options[ newIndex ].value; 
        window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl ); 
    } 
}

试试这个：

<select name="locations" onchange="gotoSection(this.value)">
function gotoSection(cururl) { 
    window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl ); 
}

编辑：也许我应该在回答之前阅读整个问题，我认为问题是你的导航不起作用，我道歉。

但关于星星的问题，如果我正确理解你的问题和示例代码，你在同一个页面中导航，只是使用不同的#哈希标签。如果是这样的话，你的document.ready就不会运行了。相反，您可以创建一个触发星形的函数，并在分配了新的url后，从gotoSection方法调用它。

相关文章：