Question

HTML选择代码

<select name="about" class="form-control radius0 clear-value" 
   id="aboutus" 
   onchange="this.options[this.selectedIndex].value && 
   (window.location = 
   this.options[this.selectedIndex].value);">
   <option value="aims-objective">AIMS &amp; OBJECTIVES</option>
   <option value="history">HISTORY</option>
   <option value="our-supporters">OUR SUPPORTERS</option>
   <option value="donate-now">DONATE NOW</option>
</select>

如果选项值是这样的，它会获取值并显示在下拉列表中。但现在选项值更改为

<option value="/about-us/aims-objective">AIMS &amp; OBJECTIVES</option>
<option value="/about-us/history">HISTORY</option>
<option value="/about-us/our-supporters">OUR SUPPORTERS</option>
<option value="/about-us/donate-now">DONATE NOW</option>

功能

$(function(){ // Makes current value as default one
  var selectedValue = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
  console.log(selectedValue);
  $("#aboutus").val(selectedValue);
})

现在不行。在onchange函数中可能会有哪些更改。提前谢谢！

Answer 1

请检查我的回答，我假设您在abc.test/about-us/history页面并运行代码并检查，HISTORY将为preselected。

由于site url不会改变，您可以遵循此解决方案。

// script to chnage the dropdown

function selectChange(select){ 
var selectedValue; 
if(select != undefined){ 
selectedValue = select.options[select.selectedIndex].value; 

selectedValue = '/about-us/' + selectedValue; 
select.options[select.selectedIndex].value = selectedValue; 
$("#aboutus").val(selectedValue); 
window.location = selectedValue; 
} 
else{ 
selectedValue = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); 
} 
console.log(selectedValue); 
$("#aboutus").val(selectedValue); 
} 

selectChange(); 

// script to pre select the dropdown

$(function(){ 
console.log(window.location.href); 
var selectedValue = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); 
console.log(selectedValue); 
$("#aboutus").val(selectedValue); 
})

<div class="col-md-3 desktop styled-select"> 
<select name="about" class="form-control radius0 clear-value" id="aboutus" onchange="selectChange(this)"> 
<option value="aims-objective">AIMS &amp; OBJECTIVES</option> 
<option value="history">HISTORY</option> 
</select> 
</div>

Here is a Working DEMO

如果选项值具有斜杠，如何在选项中选择值

1 个答案: