How to pass values to multiple select dropdow via url hash

Question

I'm trying to pass values for three different select dropdowns through url hash. So if I enter, 'http://mywebsite.com/page#value1AppleThursday' if would pass the same value to their respective select dropdown. Is that possible?

Thanks!

Here is my 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>

You can add a separator between the different values for example "|" and then get the value url and split it by separator and then select the value for each deopdown list — mbadeveloper, Oct 13 '16 at 15:31
I found this question may be help you http://stackoverflow.com/questions/19491336/get-url-parameter-jquery-or-how-to-get-query-string-values-in-js — mbadeveloper, Oct 13 '16 at 15:44

mbadeveloper · Accepted Answer · 2016-10-13T16:09:53.517

You can achieve that by capitalize the first letter of each parameter ('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());
            }
        });

Or you can use a separator "|" to separate the three parameters ('http://mywebsite.com/page#value1|Apple|Thursday) or any other symbol you like:

$(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());
            }
        });

Thanks for your answer. I used your code to fit what I needed. Cheers! — vancespago, Oct 19 '16 at 14:18

How to pass values to multiple select dropdow via url hash

1 Answers1