如何通过url哈希传递值到多个选择下拉

How to pass values to multiple select dropdow via url hash

本文关键字：选择 何通过 url 哈希传      更新时间：2023-09-26

我试图通过url散列传递三个不同选择下拉框的值。因此，如果我输入'http://mywebsite.com/page#value1AppleThursday'，它会将相同的值传递给它们各自的选择下拉列表。这可能吗?

谢谢!

这是我的HTML: 
<ul class="filters">
  <li>
      <select id="type-select" class="input-select">
          <option value="value1">Option 1</option>
          <option value="value2">Option 2</option>
          <option value="value3">Option 3</option>
      </select>
  </li>
  <li>
      <select id="duration-select" class="input-select">
          <option value="apple">Apple</option>
          <option value="orange">Orange</option>
          <option value="grape">Grape</option>
          <option value="banana">Banana/option>
      </select>
  </li>
  <li>
      <select id="sc-select" class="input-select">
        <option value="monday">Monday</option>
        <option value="tuesday">Tuesday</option>
        <option value="wednesday">Wednesday</option>
        <option value="thursday">Thursday</option>
        <option value="friday">Friday</option>
      </select>
  </li>
</ul>

您可以通过将每个参数的第一个字母大写来实现('http://mywebsite.com/page#Value1AppleThursday):

        $(document).ready(function(){
            var urlHashValue = decodeURIComponent(window.location.hash.substring(1));
            var urlVariables = urlHashValue.match(/[A-Z][a-z|0-9]+/g);
            if(urlVariables.length >= 3){
                $("#type-select").val(urlVariables[0].toLowerCase());
                $("#duration-select").val(urlVariables[1].toLowerCase());
                $("#sc-select").val(urlVariables[2].toLowerCase());
            }
        });

或者您可以使用分隔符"|"来分隔三个参数('http://mywebsite.com/page#value1|Apple|Thursday)或您喜欢的任何其他符号:

$(document).ready(function(){
            var urlHashValue = decodeURIComponent(window.location.hash.substring(1));
            var urlVariables = urlHashValue.split('|');
            if(urlVariables.length >= 3){
                $("#type-select").val(urlVariables[0].toLowerCase());
                $("#duration-select").val(urlVariables[1].toLowerCase());
                $("#sc-select").val(urlVariables[2].toLowerCase());
            }
        });
相关文章：