如何通过 url 哈希将值传递给多个选择下拉列表

Question

我正在尝试通过 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>

Answer 1

您可以通过将每个参数的首字母大写 ('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());
            }
        });