Question

我为索引页面中的某些页面创建了一个下拉列表。从下拉列表中选择一个页面后，页面将重定向到相应的页面。下面是代码：

我。的index.html

<script>
function DropList() {
var n = document.getElementById("sel").options.length;
document.getElementById("sel").size = n;
}

function handleSelect(elm){
window.location = elm.value;
}
</script>
<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
  </script>
<div>
    <select id="sel" onchange="javascript:handleSelect(this)">            
<option value="page1.html/">page1</option>
<option value="page2.html/">page2</option>
<option value="page3.html/">page3</option>
<option value="page4.html/">page4</option>
</select>
</div>

现在从下拉列表中选择page1后，页面将重定向到page1.html，其中我给出了相同的下拉代码，如下所示：

ii.Page1.html

<div>
    <select id="sel" onchange="javascript:handleSelect(this)">            
<option value="page1.html/">page1</option>
<option value="page2.html/">page2</option>
<option value="page3.html/">page3</option>
<option value="page4.html/">page4</option>
</select>
</div>

我想在page1.html页面中显示下拉列表中的page1选项，使其处于活动状态（在下拉列表中默认选中）。因为它在从索引页面选择page1后被重定向。请帮助我如何将页面置于活动状态。

Answer 1

事实上，您无法跨页面传递javascript变量。但你可以通过＆＃34;作弊＆＃34;与网址。

您的选项的值为网址的末尾window.location.pathname。

有了它，您可以找到并选择正确的选项。

var page = window.location.pathname;
var select = document.getElementById('sel');

var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
}

这是未经测试的代码，我使用this question作为选择部分。但我希望我能给你一个线索。

Answer 2

检查一次..获取当前页面的网址，然后将其拆分并获取页面* .html ..将其设置为选择元素值

var pageURLArray = $(location).attr("href").split("/");
var pageURL = pageURLArray[pageURLArray.length-2]+'/';
alert(pageURL);
$('#sel').val(pageURL);

function DropList() {
var n = document.getElementById("sel").options.length;
document.getElementById("sel").size = n;
}

function handleSelect(elm){
window.location = elm.value;
}

<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
  </script>
<div>
    <select id="sel" onchange="javascript:handleSelect(this)">            
<option value="page1.html/">page1</option>
<option value="page2.html/">page2</option>
<option value="page3.html/">page3</option>
<option value="page4.html/">page4</option>
</select>
</div>

Answer 3

实际上你可以通过页面传递js变量。使用sessionStorage或localStorage 您可以尝试使用sessionStorage.setItem('key', 'value') 作为键的位置，您将根据下拉列表是否处于活动状态将下拉列表的ID或类设置为true/false。然后，一旦你加载页面，你可以检查下拉列表是否应该用sessionStorage.getItem('key')打开，只需添加活动状态类

如何显示选定的一个页面的下拉列表将在另一个页面中处于活动状态

3 个答案: