I have a drop down menu in HTML that has a list of all 50 states. Example:
<select>
<option value="AL">Alabama</option>
</select>
I am wanting to have a "Go" button next to it that redirects to a page with the selected state. Is this possible in HTML? How would I go about doing this?
I don't think this is possible. What you want to achieve requires an anchor tag on every option. I've tried that but only the option gets clicked.
I am a teacher, and I currently run a blog via blogger.com for my class. The link is http://stmlatin2019.blogspot.com
You'll notice that I have some drop-down menus in the left sidebar of the blog. These work beautifully on my laptop and on my desktop. The problem is that my school is now switching to iPads, and I am having trouble getting the menus to work on most iPad browsers. They open in Chrome, but the security restrictions on campus distort the look of the blog on Chrome.
My question is this: While I know this is not an Apple forum, could anyone show me how to tweak this code so that the dropdown menus work in iPad browsers like Safari? Currently, Safari lets me pull down the menu and make a selection, but then nothing happens once I make a selection.
I guess I should say that I know absolutely nothing about coding. In fact, I stumbled upon that dropdown code on accident a couple of years ago, and, miraculously, I got it to work. Now I'm back to square one.
Here is the code for one of the menus so that you can see what I'm dealing with:
<select style="background-color:#eee9dd"
id="Select1" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options [0].selected=true" class="text_noresize" name="select">
<option selected />Select a link
<option value="" />
<option value="http://www.stmsaints.com/site1.php" /> StM Homepage
<option value="https://mail.stmsaints.com/owa" /> StM E-mail
<option value="http://www.edmodo.com" /> Edmodo
<option value="" /> ____________________</select>"
Any help you can offer me would be most appreciated.
Here is the answer, from Apple docs
The standard window.open() JavaScript method cannot be used to open a new tab and window from a global HTML file or an extension bar. Instead, the global file and extension bars have access to the SafariApplication, SafariBrowserWindow, and SafariBrowserTab classes, whose methods and properties allow you to work with windows and tabs.
Also posted here: link
Safari/Chrome have built-in pop-up blockers that stop this from working. The only Javascript that is allowed to open a new window in Safari/Chrome is Javascript directly attached to click handlers (and other direct user input handlers).
However, you could display an alert showing pop-up blocked.
Try this:
<select id="retailer" class="windowOpen">
<option value="#">Select one</option>
<option value="http://amazon.com">Amazon</option>
<option value="http://ebay.com">eBay</option>
</select>
<script>
$(document).ready(function () {
$('select.windowOpen').change(function () {
var url = $(this).val();
var open = window.open(url);
if (open == null || typeof (open) == 'undefined') alert("Turn off your pop-up blocker!\n\nWe try to open the following url:\n" + url);
});
});
</script>
JSFiddle:
http://jsfiddle.net/utcB9/1
I have number of html <select> elements in webpages which displaying in the app (in UIWebView control). Some of them allow multiple choice. I need to perform action when user change something in the list. For multiple choice I need to perform action after user finish rearranging checkboxes and click on 'done'.
How it was implemented in iOS 6 (and works perfectly there):
<select onblur="alert('do something...');">...</select>
<select multiple='multiple' onblur="alert('do something...');">...</select>
iOS 7 issue:
<select onblur="alert('NOT ALWAYS WORK...');">...</select>
<select multiple='multiple' onblur="alert('NOT ALWAYS WORK...');">...</select>
<select onchange="alert('THIS WORKS');">...</select>
<select multiple='multiple' onchange="alert('WORKS BUT NOT AS EXPECTED');">...</select>
onblur doesn't work relyable anymore. It works only if there is some other textbox or dropdown below. If it's the only dropdown/textbox on the page, it doesn't fire.
I tried replace onblur to onchange, it works, but only for single choice. For multiple choice onchange fired when user change his selection, not when he finished (by clicking "done").
Any ideas how to solve this for both single and multiple dropdown lists in iOS 7?
Maybe I missed something obvious?
I found the solution. If load following HTML in UIWebView in iOS 7 (not Safari), the onblur event doesn't work:
<html>
<head>
<meta name='viewport' content='initial-scale=1.0,maximum-scale=10.0'/>
</head>
<body>
<table style='height:80%'><tr><td>
<select onblur="alert('blur')" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td></tr></table>
</body>
</html>
The important components: viewport, table with some height defined, select inside this table.
If remove table OR remove height style OR remove viewport, then onblur works.
I can't explain this effect, but I just remove table height style and it works. Maybe it helps somebody.
I am building my first website and am trying to make it responsive. I am using a html list as the menu and for the links. When I test it on an opera software tester. It doesn't work properly. I don't know of any other tester devices.
The problem that I have is that when I click on a link it always displays the site map page. None of the other links will display.
The html code that i use is below;
<div id="drop-down">
<form name="form">
<SELECT name="guidelinks" onChange="window.location=document.form.guidelinks.options[document.form.guidelinks.selectedIndex].value">
<option selected>Main Menu</option>
<option value="index.html">Home Page</option>
<option value="small-books.html">Free books to download</option>
<option value="contact.html">Contact Us</option>
<option value="sitemap.html">Site map</option>
<option value="Free-studies-to-download.html#study-3">- Study -Reconciliation</option>
</select>
</form>
There is a close div at the end. Doesn't show in code.
It also seems that the sub menus don't work. They are anchors. The page just refreshes in mobile devices. I understand that some mobile browsers block them.
Is there a way to get the list to work?
I have a very simple select drop down. In Chrome, it doesn't drop down. The code itself works fine, and the drop down works in Safari, but for some reason it won't open in Chrome. Here is the HTML:
<select name="pellet_credit" class="item_discount">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
It should be pretty simple. It's a dropdown... Here's a screenshot of the select, selected, but not open:
--- edit ---
This is a jsfiddle with the full source included. The dropdown works for me in the jsfiddle view, but not on the actual site.
http://jsfiddle.net/HSYvf/
--- edit ---
Other drop downs on the page work fine.
Validate your HTML to make sure there aren't extraneous closing/end tags. Make sure you aren't hiding the options through CSS as well.
I had the same problem with Firefox and Chrome and due to the z-index of the form being -1.
When changed the z-index, it worked fine.
This happened to me when I put a <select> inside a jQuery .sortable() element. I copied this code right off the jQuery website, and the .disableSelection() method call killed my <select>.
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
Once I removed the .disableSelection(); (which oddly enough they've deprecated...) everything worked just fine.
I think you should set a value for your options
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
you can read more here
what ended up happening to me that caused me to be on this page is that display was set to display:none; on the option elements
solution:
$(yourdropdown).children().show();
We had a crazy problem when we were developing a client/server programming language which had a listbox. Although INPUT worked the listbox didn't. We have mouse tracking on it and by a bug the $(window).mousedown... was being enabled by default.
We were able to track the problem with this page: https://hackernoon.com/finding-that-pesky-listener-thats-hijacking-your-event-javascript-b590593f2a83
Just in case the above page disappears:
In Chrome (possibly other Chromium flavours [works on Opera too]):
Right click on element.
Click 'Inspect...'
When the 'Elements' are shown, the right panel will have [Styles][Computed][Event Listeners] (tabs). Click on 'Event Listeners'.
Look for 'mouseup', 'mousedown', 'keyup', etc and expand what you suspect and remove it to see if that fixes the problem (debug).
Change the code.
What we did was change the 'return false' to 'return true' in our code.
To debug such issues try removing all attributes from the html and add them one at a time to find out what is causing the issue.
For example, the snippet below does not work as needed.
<select size="10">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
Removing the size attribute fixes it
<select >
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
I'm adding an answer just to call out the comment by #Agos in the selected answer. Check if you have event handling code (mousedown, click, etc.) that might be stealing the events from the dropdown.
The problem for me was that I had included class names in the id declaration.
For future audience, notice in particular if your select element is inconsistent with the surrounding form styles. This is a likely clue that a class isn't being applied correctly, and you may have accidentally placed it in the wrong spot.