I have 4 <select> drop down menus with corresponding values that interact with the iframe on my website. The issue is that I want to only allow one drop down to be selectable at a time and for the other drop down menus to return to the original value when the website first opened. After researching for solutions I was not able to find any online. Below I will include the code for the drop down menus.
<script>
var gST = ""
function set_st(t) {
var sel_el = t.options[t.selectedIndex]
gST = sel_el.value
document.getElementById('my-iframe').src = 'http://watermonitor.gov/naww/index.php?st=' + gST
}
function down_ch() {
var link = "http://waterwatch.usgs.gov/download/?gt=map&st="+gST+"&ofmt=kmr&x=0";
window.open(link)
}
function setURL(url){
document.getElementById('my-iframe').src = url;
}
</script>
<header>
<div id='map_container' style="margin-top: 100px; border: 0px solid red; text-align: center;">
<div id="xbuilder">
<table>
<tbody>
<tr>
<td>
<div>
United States:
<span data-tooltip='Choose a US state'>
<select name='usst' id='usst' size='1' onchange='javascript:set_st(this);' >
<option value=''>States</option>
<option value='al'>Alabama</option>
<option value='ak'>Alaska</option>
<option value='az'>Arizona</option>
<option value='ar'>Arkansas</option>
<option value='ca'>California</option>
<option value='co'>Colorado</option>
<option value='ct'>Connecticut</option>
<option value='de'>Delaware</option>
<option value='dc'>District of Columbia</option>
<option value='fl'>Florida</option>
<option value='ga'>Georgia</option>
<option value='hi'>Hawaii</option>
<option value='id'>Idaho</option>
<option value='il'>Illinois</option>
<option value='in'>Indiana</option>
<option value='ia'>Iowa</option>
<option value='ks'>Kansas</option>
<option value='ky'>Kentucky</option>
<option value='la'>Louisiana</option>
<option value='me'>Maine</option>
<option value='md'>Maryland</option>
<option value='ma'>Massachusetts</option>
<option value='mi'>Michigan</option>
<option value='mn'>Minnesota</option>
<option value='ms'>Mississippi</option>
<option value='mo'>Missouri</option>
<option value='mt'>Montana</option>
<option value='ne'>Nebraska</option>
<option value='nv'>Nevada</option>
<option value='nh'>New Hampshire</option>
<option value='nj'>New Jersey</option>
<option value='nm'>New Mexico</option>
<option value='ny'>New York</option>
<option value='nc'>North Carolina</option>
<option value='nd'>North Dakota</option>
<option value='oh'>Ohio</option>
<option value='ok'>Oklahoma</option>
<option value='or'>Oregon</option>
<option value='pa'>Pennsylvania</option>
<option value='ri'>Rhode Island</option>
<option value='sc'>South Carolina</option>
<option value='sd'>South Dakota</option>
<option value='tn'>Tennessee</option>
<option value='tx'>Texas</option>
<option value='ut'>Utah</option>
<option value='vt'>Vermont</option>
<option value='va'>Virginia</option>
<option value='wa'>Washington</option>
<option value='wv'>West Virginia</option>
<option value='wi'>Wisconsin</option>
<option value='wy'>Wyoming</option>
<option value='pr'>Puerto Rico</option>
</select>
</span>
<span data-tooltip='Choose a US water resource region'>
<select name='ushuc' id='ushuc' size='1' onchange='javascript:set_st(this);' >
<option value=''>Water Res. Region</option>
<option value='01'>01 New England</option>
<option value='02'>02 Mid Atlantic</option>
<option value='03'>03 South Atlantic-Gulf</option>
<option value='04'>04 Great Lakes</option>
<option value='05'>05 Ohio</option>
<option value='06'>06 Tennessee</option>
<option value='07'>07 Upper Mississippi</option>
<option value='08'>08 Lower Mississippi</option>
<option value='09'>09 Souris-Red-Rainy</option>
<option value='10'>10 Missouri</option>
<option value='11'>11 Arkansas-White-Red</option>
<option value='12'>12 Texas-Gulf</option>
<option value='13'>13 Rio Grande</option>
<option value='14'>14 Upper Colorado</option>
<option value='15'>15 Lower Colorado</option>
<option value='16'>16 Great Basin</option>
<option value='17'>17 Pacific Northwest</option>
<option value='18'>18 California</option>
<option value='19'>19 Alaska</option>
<option value='20'>20 Hawaii</option>
<option value='21'>21 Puerto Rico</option>
</select>
</span>
</div>
<button class="button" onClick="javascript:down_ch();"><span class="icon">Download Data</span></button>
</td>
</tr>
<tr>
<td>
<div>
Canada:
<span data-tooltip='Choose a Canadian province'>
<select name='nus' id='nus' size='1' onchange='javascript:set_st(this);' >
<option value=''>Provinces</option>
<option value='zab'>Alberta</option>
<option value='zbc'>British Columbia</option>
<option value='zmb'>Manitoba</option>
<option value='znb'>New Brunswick</option>
<option value='znl'>Newfoundland and Labrador</option>
<option value='zns'>Nova Scotia</option>
<option value='znt'>Northwest Territories</option>
<option value='znu'>Nunavut</option>
<option value='zon'>Ontario</option>
<option value='zpe'>Prince Edward Island</option>
<option value='zqc'>Quebec</option>
<option value='zsk'>Saskatchewan</option>
<option value='zyt'>Yukon</option>
</select>
</span>
<span data-tooltip='Choose a Canadian river basin'>
<select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
<option value=''>Canadian River Basins</option>
<option value='z01'>01 Maritime Provinces Drainage</option>
<option value='z02'>02 St.Lawrence River Drainage</option>
<option value='z03'>03 Northern Quebec Drainage</option>
<option value='z04'>04 Southwest Hudson Bay Drainage</option>
<option value='z05'>05 Nelson River Drainage</option>
<option value='z06'>06 Western Hudson Bay Drainage</option>
<option value='z07'>07 Great Slave Lake Drainage</option>
<option value='z08'>08 Pacific Drainage</option>
<option value='z09'>09 Yukon River Drainage</option>
<option value='z10'>10 Arctic Drainage</option>
<option value='z11'>11 Mississippi River Drainage</option>
</select>
</span>
</div>
<div style='margin-left: 10px; float: right;' data-tooltip="Click to view a map of specified region."><input value="Reset Map" type="button" onclick="setURL('http://watermonitor.gov/naww/index.php')"/></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</header>
You can probably achieve this with events. E.g. when the first drop down list is opened, then set all of the others to disabled:
http://html.com/attributes/select-disabled/
You could do that with jquery like this:
$(ele).attr(disabled, disabled);
For the events, check out this:
http://api.jquery.com/category/events/
look up the change event, once the event fires you'll need to set the other drop down lists to the original value e.g.:
$(ele).val('0');
You may want to update your question with what should happen when the page loads, and then what should happen when you open drop down lists on the page.
Related
I've created an allSelect variable referencing all select elements nested within the govLinks form (hopefully that's correct, see HTML). I need to loop through the allSelect object collection and for each selection list in the collection create an anonymous function for the onchange event.
Within this anonymous function, I need to use the href property of the location object to change the page shown in the browser window to the value of the target of the event object that initiated the onchange event.
Here's what I've tried thus far:
window.addEventListener("load", function() {
var allSelect = document.getElementById("govLinks").querySelectorAll("select");
for (var i = 0; i < allSelect.length; i++) {
allSelect.onchange = function(e) {
location.href = e.target.value;
}
}
});
On my makeshift webpage I have 4 drop-down menus containing links to government websites. Upon the user's selection, I'd like the page to be redirected to the selected link.
HTML:
<article>
<form id="govLinks" name="govLinks">
<h1>Government Sites on the Web</h1>
<p>Select a site from one of the drop-down lists below.</p>
<table>
<tr><td>Executive Branch</td>
<td><select name="executive" id="executive" class="optionLinks">
<option value="#">Select a Web site</option>
<option value="http://www.whitehouse.gov">The White House</option>
<option value="http://www.usda.gov">Department of Agriculture</option>
<option value="http://www.doc.gov">Department of Commerce</option>
<option value="http://www.defenselink.mil">Department of Defense</option>
<option value="http://www.ed.gov">Department of Education</option>
<option value="http://www.energy.gov">Department of Energy</option>
<option value="http://www.hhs.gov">Department of Health and Human Services</option>
<option value="http://www.whitehouse.gov/homeland">Department of Homeland Security</option>
<option value="http://www.hud.gov">Department of Housing and Urban Development</option>
<option value="http://www.doi.gov">Department of the Interior</option>
<option value="http://www.usdoj.gov">Department of Justice</option>
<option value="http://www.dol.gov">Department of Labor</option>
<option value="http://www.state.gov">Department of State</option>
<option value="http://www.ustreas.gov">Department of the Treasury</option>
</select>
</td>
</tr>
<tr><td>Legislative Branch</td>
<td><select name="legislative" id="legislative" class="optionLinks">
<option value="#">Select a Web site</option>
<option value="http://www.house.gov">House Web Site</option>
<option value="http://clerk.house.gov/">Clerk of the House</option>
<option value="http://www.senate.gov">Senate Web Site</option>
<option value="http://www.senate.gov/general/contact_information/senators_cfm.cfm">Senators' Web Sites</option>
<option value="http://www.senate.gov/artandhistory/history/common/generic/Senate_Historical_Office.htm">Senate Historic Office</option>
<option value="http://www.cq.com">Congressional Quarterly</option>
<option value="http://www.loc.gov/">Library of Congress</option>
<option value="http://www.gao.gov/">Government Accountability Office</option>
<option value="http://www.cbo.gov/">Congressional Budget Office</option>
</select>
</td>
</tr>
<tr><td>Judicial Branch</td>
<td><select name="judicial" id="judicial" class="optionLinks">
<option value="#">Select a Web site</option>
<option value="http://www.uscourts.gov">U.S. Courts</option>
<option value="https://www.supremecourt.gov/">U.S. Supreme Court</option>
<option value="http://www.uscourts.gov/courtsofappeals.html">U.S. Courts of Appeals</option>
</select>
</td>
</tr>
<tr><td>State Governments</td>
<td><select name="state" id="state" class="optionLinks">
<option value="#">Select a Web site</option>
<option value="http://www.statelocalgov.net/index.cfm">State and Local Government on the Net</option>
<option value="http://www.statelocalgov.net/state-al.cfm">Alabama</option>
<option value="http://www.statelocalgov.net/state-ak.cfm">Alaska</option>
<option value="http://www.statelocalgov.net/state-az.cfm">Arizona</option>
<option value="http://www.statelocalgov.net/state-ar.cfm">Arkansas</option>
<option value="http://www.statelocalgov.net/state-ca.cfm">California</option>
<option value="http://www.statelocalgov.net/state-co.cfm">Colorado</option>
<option value="http://www.statelocalgov.net/state-ct.cfm">Connecticut</option>
<option value="http://www.statelocalgov.net/state-de.cfm">Delaware</option>
<option value="http://www.statelocalgov.net/state-dc.cfm">District of Columbia</option>
<option value="http://www.statelocalgov.net/state-fl.cfm">Florida</option>
<option value="http://www.statelocalgov.net/state-ga.cfm">Georgia</option>
<option value="http://www.statelocalgov.net/state-hi.cfm">Hawaii</option>
<option value="http://www.statelocalgov.net/state-id.cfm">Idaho</option>
<option value="http://www.statelocalgov.net/state-il.cfm">Illinois</option>
<option value="http://www.statelocalgov.net/state-in.cfm">Indiana</option>
<option value="http://www.statelocalgov.net/state-ia.cfm">Iowa</option>
<option value="http://www.statelocalgov.net/state-ks.cfm">Kansas</option>
<option value="http://www.statelocalgov.net/state-ky.cfm">Kentucky</option>
<option value="http://www.statelocalgov.net/state-la.cfm">Louisana</option>
<option value="http://www.statelocalgov.net/state-me.cfm">Maine</option>
<option value="http://www.statelocalgov.net/state-md.cfm">Maryland</option>
<option value="http://www.statelocalgov.net/state-ma.cfm">Massachusetts</option>
<option value="http://www.statelocalgov.net/state-mi.cfm">Michigan</option>
<option value="http://www.statelocalgov.net/state-mn.cfm">Minnesota</option>
<option value="http://www.statelocalgov.net/state-ms.cfm">Mississippi</option>
<option value="http://www.statelocalgov.net/state-mo.cfm">Missouri</option>
<option value="http://www.statelocalgov.net/state-mn.cfm">Montana</option>
<option value="http://www.statelocalgov.net/state-ne.cfm">Nebraska</option>
<option value="http://www.statelocalgov.net/state-nv.cfm">Nevada</option>
<option value="http://www.statelocalgov.net/state-nh.cfm">New Hampshire</option>
<option value="http://www.statelocalgov.net/state-nj.cfm">New Jersey</option>
<option value="http://www.statelocalgov.net/state-nm.cfm">New Mexico</option>
<option value="http://www.statelocalgov.net/state-ny.cfm">New York</option>
<option value="http://www.statelocalgov.net/state-nc.cfm">North Carolina</option>
<option value="http://www.statelocalgov.net/state-nd.cfm">North Dakota</option>
<option value="http://www.statelocalgov.net/state-oh.cfm">Ohio</option>
<option value="http://www.statelocalgov.net/state-ok.cfm">Oklahoma</option>
<option value="http://www.statelocalgov.net/state-or.cfm">Oregon</option>
<option value="http://www.statelocalgov.net/state-pa.cfm">Pennsylvania</option>
<option value="http://www.statelocalgov.net/state-ri.cfm">Rhode Island</option>
<option value="http://www.statelocalgov.net/state-sc.cfm">South Carolina</option>
<option value="http://www.statelocalgov.net/state-sd.cfm">South Dakota</option>
<option value="http://www.statelocalgov.net/state-tn.cfm">Tennessee</option>
<option value="http://www.statelocalgov.net/state-tx.cfm">Texas</option>
<option value="http://www.statelocalgov.net/state-ut.cfm">Utah</option>
<option value="http://www.statelocalgov.net/state-vt.cfm">Vermont</option>
<option value="http://www.statelocalgov.net/state-va.cfm">Virginia</option>
<option value="http://www.statelocalgov.net/state-wa.cfm">Washington</option>
<option value="http://www.statelocalgov.net/state-wv.cfm">West Virginia</option>
<option value="http://www.statelocalgov.net/state-wi.cfm">Wisconsin</option>
<option value="http://www.statelocalgov.net/state-wy.cfm">Wyoming</option>
</select>
</td>
</tr>
</table>
</form>
</article>
You forgot to get the index of the array
allSelect[i].onchange = function(e) {
location.href = e.target.value;
}
I have Select in my View
Here is code
<li class="airline">
<select name="search[airline]" id="search_airline" class="custom" style="display: none;">
<option value="">Alla</option>
<option value="SK">SAS</option>
<option value="DY">Norwegian</option>
<option value="EI">Aer Lingus</option>
<option value="SU">Aeroflot</option>
<option value="AR">Aerolineas Argentinas</option>
<option value="AM">Aeromexico</option>
<option value="BT">Air Baltic</option>
<option value="AC">Air Canada</option>
<option value="CA">Air China</option>
<option value="UX">Air Europa</option>
<option value="AF">Air France</option>
<option value="AI">Air India</option>
<option value="NZ">Air New Zealand</option>
<option value="AZ">Alitalia</option>
<option value="NH">All Nippon Airways</option>
<option value="AA">American Airlines</option>
<option value="OS">Austrian Airlines</option>
<option value="VO">Austrian Arrows</option>
<option value="BA">British Airways</option>
<option value="BD">British Midland</option>
<option value="SN">Brussels Airlines</option>
<option value="CX">Cathay Pacific</option>
<option value="CO">Continental Airlines</option>
<option value="OK">Czech Airlines</option>
<option value="DL">Delta Airlines</option>
<option value="EK">Emirates</option>
<option value="EY">Etihad Airways</option>
<option value="AY">Finnair</option>
<option value="GA">Garuda Indonesia</option>
<option value="IB">Iberia</option>
<option value="FI">Icelandair</option>
<option value="KL">KLM</option>
<option value="KE">Korean Air Lines</option>
<option value="LA">LAN Airlines</option>
<option value="LO">LOT - Polish Airlines</option>
<option value="NG">Lauda Air</option>
<option value="LH">Lufthansa</option>
<option value="DM">Maersk Air</option>
<option value="MH">Malaysian Airlines</option>
<option value="TF">Malmö Aviation</option>
<option value="MX">Mexicana Airlines</option>
<option value="NW">Northwest Airlines</option>
<option value="DY">Norwegian</option>
<option value="OA">Olympic Airways</option>
<option value="QF">Qantas Airways</option>
<option value="QR">Qatar Airways</option>
<option value="SK">SAS</option>
<option value="SQ">Singapore Airlines</option>
<option value="SA">South African Airways</option>
<option value="LX">Swiss Intl Air Lines</option>
<option value="TP">TAP Portugal</option>
<option value="TG">Thai Airways</option>
<option value="TK">Turkish Airlines</option>
<option value="UA">United Airlines</option>
<option value="VS">Virgin Atlantic Airw.</option>
<option value="VY">Vueling</option>
<option value="WF">Wideroe</option>
</select>
<span tabindex="0" id="search_airline-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="search_airline-menu" aria-haspopup="true" class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget"><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-selectmenu-text">Flygbolag: Alla</span>
</span>
</li>
Also I have function in TS that make variable in it with word - "Flygbolag"
Here is it
function update_search_airline() {
$(".ui-selectmenu-text", $("#search_airline-button")).html(
__("Flygbolag") + ": " + $(".ui-selectmenu-text", $("#search_airline-button")).html());
}
So when I load page all okay and I get for example
But when I select value from this select I need to make it with this word too
So in function I make this code
function load_field_actions(): void {
$(".tooltip").tooltipster()
$("#search_airline").change(update_search_airline)
}
And this row must update it correctly
$("#search_airline").change(update_search_airline)
But it just change default value to next value without Flygbolag
I am trying to create a button on my website that allows you to download data when clicked. This link should update based on the selected value in the 4 drop down menus I have. The problem is my code does not work. Here is the code below:
<script>
function set_st(t) {
var sel_el = t.options[t.selectedIndex]
document.getElementById('my-iframe').src = 'http://watermonitor.gov/naww/index.php?st=' + sel_el.value
}
function set_st(t) {
var sel_el = t.options[t.selectedIndex]
document.getElementById('down').src = 'http://watermonitor.gov/naww/index.php?st=' + sel_el.value
}
</script>
<header>
<div id='map_container' style="margin-top: 100px; border: 0px solid red; text-align: center;">
<div id="xbuilder">
<table>
<tbody>
<tr>
<td>
<div>
United States:
<span data-tooltip='Choose a US state'>
<select name='usst' id='usst' size='1' onchange='set_st(this);' >
<option value=''>States</option>
</option>
<option value='al'>Alabama</option>
<option value='ak'>Alaska</option>
<option value='az'>Arizona</option>
<option value='ar'>Arkansas</option>
<option value='ca'>California</option>
<option value='co'>Colorado</option>
<option value='ct'>Connecticut</option>
<option value='de'>Delaware</option>
<option value='dc'>District of Columbia</option>
<option value='fl'>Florida</option>
<option value='ga'>Georgia</option>
<option value='hi'>Hawaii</option>
<option value='id'>Idaho</option>
<option value='il'>Illinois</option>
<option value='in'>Indiana</option>
<option value='ia'>Iowa</option>
<option value='ks'>Kansas</option>
<option value='ky'>Kentucky</option>
<option value='la'>Louisiana</option>
<option value='me'>Maine</option>
<option value='md'>Maryland</option>
<option value='ma'>Massachusetts</option>
<option value='mi'>Michigan</option>
<option value='mn'>Minnesota</option>
<option value='ms'>Mississippi</option>
<option value='mo'>Missouri</option>
<option value='mt'>Montana</option>
<option value='ne'>Nebraska</option>
<option value='nv'>Nevada</option>
<option value='nh'>New Hampshire</option>
<option value='nj'>New Jersey</option>
<option value='nm'>New Mexico</option>
<option value='ny'>New York</option>
<option value='nc'>North Carolina</option>
<option value='nd'>North Dakota</option>
<option value='oh'>Ohio</option>
<option value='ok'>Oklahoma</option>
<option value='or'>Oregon</option>
<option value='pa'>Pennsylvania</option>
<option value='ri'>Rhode Island</option>
<option value='sc'>South Carolina</option>
<option value='sd'>South Dakota</option>
<option value='tn'>Tennessee</option>
<option value='tx'>Texas</option>
<option value='ut'>Utah</option>
<option value='vt'>Vermont</option>
<option value='va'>Virginia</option>
<option value='wa'>Washington</option>
<option value='wv'>West Virginia</option>
<option value='wi'>Wisconsin</option>
<option value='wy'>Wyoming</option>
<option value='pr'>Puerto Rico</option>
</select>
</span>
<span data-tooltip='Choose a US water resource region'>
<select name='ushuc' id='ushuc' size='1' onchange='set_st(this);' >
<option value=''>Water Res. Region</option>
<option value='01'>01 New England</option>
<option value='02'>02 Mid Atlantic</option>
<option value='03'>03 South Atlantic-Gulf</option>
<option value='04'>04 Great Lakes</option>
<option value='05'>05 Ohio</option>
<option value='06'>06 Tennessee</option>
<option value='07'>07 Upper Mississippi</option>
<option value='08'>08 Lower Mississippi</option>
<option value='09'>09 Souris-Red-Rainy</option>
<option value='10'>10 Missouri</option>
<option value='11'>11 Arkansas-White-Red</option>
<option value='12'>12 Texas-Gulf</option>
<option value='13'>13 Rio Grande</option>
<option value='14'>14 Upper Colorado</option>
<option value='15'>15 Lower Colorado</option>
<option value='16'>16 Great Basin</option>
<option value='17'>17 Pacific Northwest</option>
<option value='18'>18 California</option>
<option value='19'>19 Alaska</option>
<option value='20'>20 Hawaii</option>
<option value='21'>21 Puerto Rico</option>
</select>
</span>
</div>
<div style="float: right; box-sizing: border-box;">
<form action="http://waterwatch.usgs.gov/download/?gt=map&ofmt=kmr&x=0&st=" id="down">
<input type="submit" value="Go to Google" / </form>
</div>
</td>
</tr>
<tr>
<td>
<div>
Canada:
<span data-tooltip='Choose a Canadian province'>
<select name='nus' id='nus' size='1' onchange='set_st(this);' >
<option value=''>Provinces</option>
<option value='zab'>Alberta</option>
<option value='zbc'>British Columbia</option>
<option value='zmb'>Manitoba</option>
<option value='znb'>New Brunswick</option>
<option value='znl'>Newfoundland and Labrador</option>
<option value='zns'>Nova Scotia</option>
<option value='znt'>Northwest Territories</option>
<option value='znu'>Nunavut</option>
<option value='zon'>Ontario</option>
<option value='zpe'>Prince Edward Island</option>
<option value='zqc'>Quebec</option>
<option value='zsk'>Saskatchewan</option>
<option value='zyt'>Yukon</option>
</select>
</span>
<span data-tooltip='Choose a Canadian river basin'>
<select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
<option value=''>Canadian River Basins</option>
<option value='z01'>01 Maritime Provinces Drainage</option>
<option value='z02'>02 St.Lawrence River Drainage</option>
<option value='z03'>03 Northern Quebec Drainage</option>
<option value='z04'>04 Southwest Hudson Bay Drainage</option>
<option value='z05'>05 Nelson River Drainage</option>
<option value='z06'>06 Western Hudson Bay Drainage</option>
<option value='z07'>07 Great Slave Lake Drainage</option>
<option value='z08'>08 Pacific Drainage</option>
<option value='z09'>09 Yukon River Drainage</option>
<option value='z10'>10 Arctic Drainage</option>
<option value='z11'>11 Mississippi River Drainage</option>
</select>
</span>
</div>
<div style='margin-left: 10px; float: right;' data-tooltip="Click to view a map of specified region.">
<input name="go" value="Go" type="submit"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</center>
</div>
</header>
<body>
<div class="center">
<div id="my-div">
<iframe src="http://watermonitor.gov/naww/index.php" id="my-iframe"></iframe>
</div>
</div>
<div class="legend">
<img name="legend" style="border: 0px" src="http://waterwatch.usgs.gov/new/images/map_legends/ptile_dot.gif" alt="map legend">
</div>
</body>
</html>
My question is about the button with id "down" and my attempt on a way to solve it in javascript is above.
Try this:
get selected value
$( "#usst" ).val();
and set src attribüte
$("#down").attr("src",url);
Hi guys I've looked around and I haven't really gotten a really good answer on this.
So I have a drop down list that allows my users to pick which city they live in and stuff. However I want it so that that drop down has the ability to allow users to first type in their value first or select a value from the drop down.
Here is what I have so far:
<div class="atl_form_row">
<div class="atl_left"><span class="mandatory">*</span>
<label class="control-label atlFormLabel" for="Service City">Service City/County:</label>
</div>
<div class="atl_right">
<select id="ServiceCity" name="ServiceCity">
<option value "" disabled selected>Select City/County</option>
<option value="Alpharetta">Alpharetta</option>
<option value="Atlanta">Atlanta</option>
<option value="Brookhaven">Brookhaven</option>
<option value="Chamblee">Chamblee</option>
<option value="Chattahoochee Hills">Chattahoochee Hills</option>
<option value="College Park">College Park</option>
<option value="Decatur">Decatur</option>
<option value="Douglasville">Douglasville</option>
<option value="Duluth">Duluth</option>
<option value="Dunwoody">Dunwoody</option>
<option value="East Point">East Point</option>
<option value="Fairburn">Fairburn</option>
<option value="Fulton County">Fulton County</option>
<option value="Hapeville">Hapeville</option>
<option value="Johns Creek">Johns Creek</option>
<option value="Marietta">Marietta</option>
<option value="Milton">Milton</option>
<option value="Mountain Park">Mountain Park</option>
<option value="Newnan">Newnan</option>
<option value="Palmetto">Palmetto</option>
<option value="Riverdale">Riverdale</option>
<option value="Roswell">Roswell</option>
<option value="Sandy Springs">Sandy Springs</option>
<option value="Smyrna">Smyrna</option>
<option value="Union City">Union City</option>
</select>
</div>
</div>';
The new HTML5 <datalist> element is what you are looking for:
<input list="ServiceCity">
<datalist id="ServiceCity" name="ServiceCity">
<option value "" disabled selected>Select City/County</option>
<option value="Alpharetta">Alpharetta</option>
<option value="Atlanta">Atlanta</option>
<option value="Brookhaven">Brookhaven</option>
<option value="Chamblee">Chamblee</option>
<option value="Chattahoochee Hills">Chattahoochee Hills</option>
<option value="College Park">College Park</option>
<option value="Decatur">Decatur</option>
<option value="Douglasville">Douglasville</option>
<option value="Duluth">Duluth</option>
<option value="Dunwoody">Dunwoody</option>
<option value="East Point">East Point</option>
<option value="Fairburn">Fairburn</option>
<option value="Fulton County">Fulton County</option>
<option value="Hapeville">Hapeville</option>
<option value="Johns Creek">Johns Creek</option>
<option value="Marietta">Marietta</option>
<option value="Milton">Milton</option>
<option value="Mountain Park">Mountain Park</option>
<option value="Newnan">Newnan</option>
<option value="Palmetto">Palmetto</option>
<option value="Riverdale">Riverdale</option>
<option value="Roswell">Roswell</option>
<option value="Sandy Springs">Sandy Springs</option>
<option value="Smyrna">Smyrna</option>
<option value="Union City">Union City</option>
</datalist>
As the user types in the <input>, the options from the datalist drop down. Or, a double click makes the whole list drop, like a select.
See this JSFiddle for a demo
i am working on a mobile app using HTML/CSS/JavaScript. I have two select option (drop down menu), one for number of dates and the other one for number of years. I want to be able to see these select options in one line, but no matter what I do, I get a drop down menu (number of dates) on one line and on the next line I get the drop down menu for number of years. Below you can see my codes
<div data-role="controlgroup" data-type = "horizontal" >
<label for="select-choice-1" >Choose Expiry Date</label>
<select name="select-choice-1" id="select-choice-1" data-inline = "true" style = "float: left">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select><br />
</div>
UPDATE:
I am testing these codes on Android browser using jQuery mobile framework.
Try floating both select tags left and adding a clear:both to the styling on the label. If you want the label above the two selects, just add a <br /> right below the label.
It would look something like
<label>Label Value</label>
<select>
<option>Etc...</option>
</select>
<select>
<option>Second select option...</option
</select>
and the CSS would be
label {
clear:both;
}
select {
float:left;
}
Also, as a heads-up, you end your second select tag before the first option tag, so they aren't included.
<select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>. You need to get rid of the / right before the ending of the tag.
It's the width on the ui-select class that's causing your issue, Setting the width to auto should correct the issue. jQM adds a ton of extra markup for the look and feel on the page to be consistent across multiple devices. If you view the page source in a browser such as Chrome or FireFox you can see the extra elements. In your case you needed to modify the ui-select class as it has a width of 60% as the default.
Live Example:
http://jsfiddle.net/phillpafford/trdYP/47/
JS:
$('#select-choice-1').parent().parent().css('width','auto');
HTML:
<div data-role="page" id="home">
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" data-inline="true">
<label for="select-choice-1" data-inline="true">Choose Expiry Date</label>
<select name="select-choice-1" id="select-choice-1" data-inline="true">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="select-year" id="select-yaer" data-inline="true">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</div>
</div>
</div>
If you make them both float left they will sit side by side, as long as their combined widths don't exceed the width of the container.