navigating between page divs with select and jquery mobile
Question by krapdagn
Trying to use this dropdown select to change to a different anchor on the page. It’s working except that when you select SF, it goes to the SF page and the selector button is set to SF. But if you then select NY, it goes back to #page1 but the default button stays as SF, unless the page is reloaded.
<select name="select1" id="select1" data-mini="true" data-native-menu="false" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="#page1">New York, NY</option>
<option value="#SF">San Francisco, CA</option>
<option value="#LV">Las Vegas, NV</option>
<option value="#DAL">Dallas, TX</option>
</select>
What am I missing?
Thanks!
EDIT:
I think there is incomplete information here. On the #SF anchor text, for example, it’s an entirely new page with its own copy of the <select> in the header of that page. So what is happening is that when you select the second one to go back to the first, it doesn’t reset the first one.
Here is what the second select looks like:
<select name="select2" id="select2" data-mini="true" data-native-menu="false" ONCHANGE="window.location = this.options[this.selectedIndex].value;">
<option value="#SF">San Francisco, CA</option>
<option value="#page1">New York, NY</option>
<option value="#LV">Las Vegas, NV</option>
<option value="#DAL">Dallas, TX</option>
Here’s what happens
1 – Load #page1, NYC is preselected.
2 – Select SF, loads #SF, SF is selected because it is default in the second select
3 – Select NYC, it DOES load the NYC/#page1 page, but the select dropdown is still stuck on #SF because that was what it was last left at before the location changed.
Hopefully this more fully explains my problem. I’ve tried something like this (http://jsfiddle.net/QEUwg/132/) but it isn’t working, maybe because the two selects are in separate divs?
OK This works:
//refresh value
$('select').selectmenu('refresh');
//refresh and force rebuild
$('select').selectmenu('refresh', true);
It only took about 20 hours of beating my head against the wall.
Answer by Starx
Use window.location instead of location
Update:
I will give you a better way since you are already using jQuery.
$("#select-choice-1").change(function() {
$($(this).val())[0].scrollIntoView(true);
})
Update 2
The problem is that you are using multiple select box and not updating all of them, when you are changing the page
$(".navigateToPage").on('change', function() {
$(".navigateToPage").val($(this).val()); //set value for all the select boxes
$(".navigateToPage").parent().find(".ui-btn-text").html($(this).find("option:selected").html());
//^ Also find the text and update them
});
Working Solution
