如果选项值有斜线，如何选择选项中的值

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