CODEWITHSUNDEEP
jqueryhtmlformsmobile
Lieutenant Dan
Lieutenant Dan

Reputation: 8264

mobile select menu stay on current URL select option

jQuery:

   $(function() {
            $('select').change(function(){
            var url = $(this).val();
            window.location = url;
            });
       });

HTML:

<select>
  <option value="http://www.coolwebsite.com.au/Sandbox/">Home</option>
  <option value="http://www.coolwebsite.com.au/Sandbox/kitchen.php">Kitchens</option>
  <option value="http://www.coolwebsite.com.au/Sandbox/fitouts.php">Shop Fitouts</option>
  <option value="http://www.coolwebsite.com.au/Sandbox/officefitouts.php">Office Fitouts</option>
  <option value="http://www.coolwebsite.com.au/Sandbox/Gallery/">Gallery</option>
  <option value="http://www.coolwebsite.com.au/Sandbox/joinery.php">Joinery</option>
  <option value="http://www.coolwebsite.com.au/Sandbox/jobs.php">Recent Jobs</option>
  <option value="http://www.coolwebsite.com.au/Sandbox/contact.php">Contact Us</option>
</select>

It works just fine, but once the select option is clicked and new page appears, the select box returns to 'Home' option, rather than current page.

Wondering how to keep this option selected.

Upvotes: 2

Views: 143

Answers (2)

Felix
Felix

Reputation: 38102

Try this:

$(function()
    var url = window.location.href;
    $('select option[value="'+url+'"]').prop("selected",true);
});

Upvotes: 2

Paolo Casciello
Paolo Casciello

Reputation: 8202

Since you're reloading the page, it's the code generating the page (in this case the PHP code) that must write the attribute selected to the corresponding <option> tag.

<select>
  <option value="http://www.coolwebsite.com.au/Sandbox/">Home</option>
  <option value="http://www.coolwebsite.com.au/Sandbox/kitchen.php" selected>Kitchens</option>
  ...
</select>

Upvotes: 0

Related Questions