I am building a site and am having problems with select options not showing and I am not too sure what is going on.
For example, I have this page: http://bit.ly/182gqK9
If you click on the "Choose an area..." select dropdown you will see 3 options, the third is slightly cut off for some reason (not sure why that is), but if you look in the source there is clearly 6 options...
<select id="area" name="attribute_area">
<option value="">Choose an area...</option>
<option value="Area 2">PO1 - PO9</option>
<option value="Area 1">PO12 - PO17</option>
<option value="Area 2">SO14 - SO19</option>
<option value="Area 2">SO30</option>
<option value="Area 1">SO31</option>
</select>
I disabled JavaScript in FF and it seems to fix the issue, but if I remove all scripts from the page, the problem persists.
I also have a similar equally strange issue on this page: http://bit.ly/1aMTMJY
With that page, if you click on the select, it shows 4 options, if you click off it and back onto it, it displays 5 options. When again there are in fact 6 options.
It looks like your JavaScript is dynamically removing options from the select. When I disable JavaScript, I see the list of 6 options shown in your question. When I enable JavaScript and inspect the HTML, this is what I see:
<select id="area" name="attribute_area">
<option value="">Choose an area...</option>
<option value="Area 2" class="active">PO1 - PO9</option>
<option value="Area 2" class="active">SO14 - SO19</option>
<option value="Area 2" class="active">SO30</option>
</select>
Do you have code somewhere that updates the list of options on the fly?
The fact that disabling JS fixes the problem means that JS must be causing the problem. You say that you still see the problem even when you remove all JS from the page. What happens if, after removing all the JS, you also disable JS in the browser?
If all the JS has truly been removed, then disabling it should have no effect. On the other hand, if disabling it still fixes the problem, then there must be JS still hanging around somewhere - perhaps because the JS is being cached.
You say that you don't have any code that is explicitly trying to update the options on the fly, but perhaps some code is doing this inadvertently or indirectly.
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.
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.
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 am using select tag with data-role='slider' for slider switch but instead it is coming as 'drop down' select. After investigating I found that in normal scenarios , extra div with data-role=application is generated , which gives toggle switch look and feel. But that extra div is not getting generated in my application
Find the code
<select data-theme="b" class="selectElement"
data-bind="jqmFlip:chargeble" data-role="slider">
<option value="false">No</option>
<option value="true">Yes</option>
</select>
Also I am using require.js for loading js files, can that affect?
there are two option controls in a website:
<select class="operator" name="operator" id="operator">
<option value="0">Entekhab Operator</option>
<option value="1">Irancell</option>
<option value="2">Talia</option>
<option value="3">HamraheAval</option>
</select>
<select class="card" name="chargeCard" id="chargeCard">
<option value="0">Entekhab Sharj</option>
</select>
When a user changes the first one by clicking on that (and selecting an option), the second one will also change...as you see in the above code, the second option has no value and will get some values after clicking on the first one
My problem is that I have to change them via javascipt in my android program
I tried with the following:
document.getElementById("operator").value=2
and this way i changed the first one.
But the second one does not change and dose not get values! What should I do for the second option to change as well?
maybe i didnt explain my question very well. i changed the value of the option but i needed something like stimulating the change event.
this code solved my problem:
$('#operator').trigger('change');