How do I highlight the option based on the page the user is currently on?
E.g. If on Beds page, Beds option is selected.
This is inside of a wordpress sidebar text widget so it is not coded separately on each page. I guess maybe javascript would be needed to detect what page it's on?
<form>
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="#">Select a Category</option>
<option value="https://www.furnishare.it/shop/">Shop All</option>
<option value="/product-category/beds/">Beds</option>
<option value="/product-category/chairs/">Chairs</option>
<option value="/product-category/decor/">Decor</option>
<option value="/product-category/dressers/">Dressers</option>
<option value="/product-category/sofas/">Sofas</option>
<option value="/product-category/storage/">Storage</option>
<option value="/product-category/tables/">Tables</option>
</select>
</form>
Thank you!
You would want to get the url pathname:
window.location.pathname
I would suggest that you do this in a JS file rather than inline HTML. The implementation (jsfiddle wasn't saving for some reason):
http://codepen.io/anon/pen/VvEeMY
Make sure to un-comment the commented location line to get it working on your webpage:
var location = window.location.pathname;
Note that I would highly recommend not dealing with DOM events using attributes like onClick ... but to answer your question I've written the pure JS code above.
Edit: Using location.pathname requires you to use full paths starting after your domain but since your implementation was already doing so in select > option values I've taken the liberty to simplify it with location.pathname.
Related
I'm experiencing some problems when sharing links on Facebook, they are opened inside Facebook instead of the default browser. Usually, I don't mind but I discovered that some features on my pages were simply not working and I don't know why.
I have for example this that works:
<input list="brandlist" name="brandlist" oninput="loadModel()" data-label="brand">
<datalist id="brandlist" >
<option value='Acer'>Acer</option>
<option value='Alcatel'>Alcatel</option>
<option value='Apple'>Apple</option>
<option value='Asus'>Asus</option>
<option value='Black'>Black</option>
<option value='Blackshark'>Blackshark</option>
<option value='Blackview'>Blackview</option>
<option value='Cubot'>Cubot</option>
</datalist>
This code works as expected, when I start typing something in the input field the content of <datalist> is filtered and I can select one of the options.
The following code doesn't work:
<input list="modellist" name="modellist" data-label="model">
<datalist id="modellist">
<option value="model1">Model1</option>
<option value="model2">Model2</option>
<option value="model3">Model3</option>
<option value="model4">Model4</option>
</datalist>
The difference between both is that the second one loads the options from an ajax call.
The content is displayed correctly on the screen, I see the filtered list when I start typing but as soon as I select one of the options the list disappears, and the content of the option tag is not propagated to the input field.
I also see differences in behavior with alert().
From what I understand it is impossible to force Facebook to open Chrome which means that I'll have to adapt my code but in order to do this, I need to understand why it is not working in Facebook while it works fine with Chrome or any other browser.
Any idea?
additional info: submit in JS to my API doesn't seem to work either.
I am building an advanced searching operator for my app. I am trying to get the parameters of the search to persist through the search. My problem is that I have <select> tags so I can't just pass the value through.
<select name="sort" value="{{inputs.sort}}">
<option value="None" >None</option>
<option value="NAME">Alphabetical</option>
<option value="RATING">Rating</option>
<option value="RELEVANCE">Relevance</option>
</select>
the value attr doesn't work with the select tag. The only way I've found to do this is by putting the selected attr inside of the option tags <option selected="selected">...<option>, but there is no simple way to do this with handlebars.
helpers don't work because I am only using backend handlebars which doesn't allow ternaries. Apart from completely generating the HTML from the backend I can't find a way to do this but I feel like there has to be a "clean" or "dry" solution.
I am using play framework for the first time.
I want to update the web page when a value is selected from drop down with out refreshing the web page.
Consider the following example:
<select>
<option value= "Apple"> Apple </option>
<option value = "Banana"> Banana </option>
</select>
When a value is selected from drop down it should be posted to server. Then server should return some information based on the value it got. Now we should display the content corresponding to the value selected from drop down with out page refresh.
I didn't find a way to implement this using play framework. Conventionally we can do this by hiding a div initially and when a value is selected from drop down we can add content (fetched from back end) to the div and show it. I didn't understand how to implement the server side part. In play framework, controller generally returns Result type. How to return a Json value on a request in play framework ?
Can anyone please suggest other ideas ??
Thanks
A solution using jQuery (see change() and load()):
<select id="select">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>
<div id="result"></div>
<script>
$('#select').change(function() {
$('#result').load('/foo/bar?fruit=' + $(this).val());
});
</script>
EDIT: To address the JSON/server-side part of the question have a look at ScalaJsonHttp (or JavaJsonActions).
I have a simple jquery select issue using Query Mobile that I have googled for and the answers I've found just aren't working. I have an html select as follows:
<select name=x id=Sel>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
</select>
I read the actual value from a database using an ajax call and then execute the line:
$("#Sel").val(result);
The screen still shows 1 as selected. I have verified that immediately before this line that result is equal to 2.
I know I've seen this somewhere, just can't remember where.
You need to refresh the jQM selectmenu widget after changing the value:
$("#Sel").val(2).selectmenu("refresh");
DEMO
I would like this dropdown select to show an image with an alt text in front of the options, how can I do this?
<form>
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option value="#">Select one</option>
<option value="#"></option>
<option value="http://www.url1.com">www.url1.com</option>
<option value="http://www.url2.com">www.url2.com</option>
<option value="www.url3.com">www.url3.com</option>
</select>
</form>
Thanks a lot!
It is not possible to show images in an html <select> - you would have to use a custom solution like this one: http://ivaynberg.github.io/select2/
That is not a button!, it a select dropdown.
You should use ddSlick which is a free light weight jQuery plugin that allows you to create a custom drop down with images and description.
I hope this helps
DOM model doesn't allow img elements inside option elements, so you cannot put image into a select. Please have a look at an HTML language reference. But you can use JavaScript or jQuery to put an image at the left or right of the menu whenever a new option is selected.
However, in Firefox you can just add background image to option:
<select>
<option style="background-image:url(image1.png);">OPTION1</option>
<option style="background-image:url(image2.png);">OPTION2</option>
<option style="background-image:url(image3.png);">OPTION3</option>
</select>
And in other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI Selectable.
olsn's link is also a good example.