I have a drop-down selector with a large amount of items. I want to center scroll the box when it gets opened to have the selected item centered in the middle of it.
Here's a picture to show what I want, except I'm looking to do this in a drop-down list selector.
Here's an example of the dropdown I'm using:
<select name="EndTime" id="endTime">
<option value="00:00">12:00am</option>
<option value="00:15">12:15am</option>
<option value="00:30">12:30am</option>
<option value="00:45">12:45am</option>
<option value="01:00">1:00am</option>
<option value="01:15">1:15am</option>
<option value="01:30">1:30am</option>
<option value="01:45">1:45am</option>
<option value="02:00">2:00am</option>
<option value="02:15">2:15am</option>
<option value="02:30">2:30am</option>
<option value="02:45">2:45am</option>
<option value="03:00">3:00am</option>
<option value="03:15">3:15am</option>
<option value="03:30">3:30am</option>
<option value="03:45">3:45am</option>
<option value="04:00">4:00am</option>
<option value="04:15">4:15am</option>
<option value="04:30">4:30am</option>
<option value="04:45">4:45am</option>
<option value="05:00">5:00am</option>
<option value="05:15">5:15am</option>
<option value="05:30">5:30am</option>
<option value="05:45">5:45am</option>
<option value="06:00">6:00am</option>
<option value="06:15">6:15am</option>
<option value="06:30">6:30am</option>
<option value="06:45">6:45am</option>
<option value="07:00">7:00am</option>
<option value="07:15">7:15am</option>
<option value="07:30">7:30am</option>
<option value="07:45">7:45am</option>
<option value="08:00">8:00am</option>
<option value="08:15">8:15am</option>
<option value="08:30">8:30am</option>
<option value="08:45">8:45am</option>
<option value="09:00">9:00am</option>
<option value="09:15">9:15am</option>
<option value="09:30">9:30am</option>
<option value="09:45">9:45am</option>
<option value="10:00">10:00am</option>
<option value="10:15">10:15am</option>
<option value="10:30">10:30am</option>
<option value="10:45">10:45am</option>
<option value="11:00">11:00am</option>
<option value="11:15">11:15am</option>
<option value="11:30">11:30am</option>
<option value="11:45">11:45am</option>
<option value="12:00">12:00pm</option>
<option value="12:15">12:15pm</option>
<option value="12:30">12:30pm</option>
<option value="12:45">12:45pm</option>
<option value="13:00">1:00pm</option>
<option value="13:15">1:15pm</option>
<option value="13:30">1:30pm</option>
<option value="13:45">1:45pm</option>
<option value="14:00">2:00pm</option>
<option value="14:15">2:15pm</option>
<option value="14:30">2:30pm</option>
<option value="14:45">2:45pm</option>
<option value="15:00">3:00pm</option>
<option value="15:15">3:15pm</option>
<option value="15:30">3:30pm</option>
<option value="15:45">3:45pm</option>
<option value="16:00">4:00pm</option>
<option value="16:15">4:15pm</option>
<option value="16:30">4:30pm</option>
<option value="16:45">4:45pm</option>
<option value="17:00">5:00pm</option>
<option value="17:15">5:15pm</option>
<option value="17:30">5:30pm</option>
<option value="17:45">5:45pm</option>
<option value="18:00" selected="selected">6:00pm</option>
<option value="18:15">6:15pm</option>
<option value="18:30">6:30pm</option>
<option value="18:45">6:45pm</option>
<option value="19:00">7:00pm</option>
<option value="19:15">7:15pm</option>
<option value="19:30">7:30pm</option>
<option value="19:45">7:45pm</option>
<option value="20:00">8:00pm</option>
<option value="20:15">8:15pm</option>
<option value="20:30">8:30pm</option>
<option value="20:45">8:45pm</option>
<option value="21:00">9:00pm</option>
<option value="21:15">9:15pm</option>
<option value="21:30">9:30pm</option>
<option value="21:45">9:45pm</option>
<option value="22:00">10:00pm</option>
<option value="22:15">10:15pm</option>
<option value="22:30">10:30pm</option>
<option value="22:45">10:45pm</option>
<option value="23:00">11:00pm</option>
<option value="23:15">11:15pm</option>
<option value="23:30">11:30pm</option>
<option value="23:45">11:45pm</option>
</select>
I'm sure there's a better way of doing this, but it does work
HERE
$('#listF').click(function() {
var n = 10;
var val = this.selectedIndex;
if ((this.selectedIndex < ($(this).find('option').length - n)) && (this.selectedIndex > n)) {
this.selectedIndex += n;
this.selectedIndex -= (2 * n);
this.selectedIndex += n;
} else {
this.selectedIndex = ((this.selectedIndex<n)?0:99);
this.selectedIndex = val;
}
});
Edit: Adding a check before updating the selectedIndex so that you can select the last n( 10 here) items as well.
Edit2: Fixing the bug pointed out by rolfv1
I made this small example to give you an idea how to do this, what you basically do is that you first select the item that will be at the bottom of the list when you have the desired item in the middle, so in your image, first select the item "T3", and then select the actual desired item, see this Fiddle as the example:
http://jsfiddle.net/rolfv1/RZeLN/1/
<form name="form">
<select size=6 name="list">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
<option value="k">k</option>
<option value="l">l</option>
<option value="m">m</option>
</select>
<input type="button" onclick="choose();" value="select" />
</form>
and the test function in this case is just:
function choose(){
document.form.list.value="k";
document.form.list.value="i";
}
Of course the script and everything would have to be adjusted to your needs, but it shows the idea I hope
So as I mentioned in my comment, I upgraded the script of tewathia a bit (so most credits go to him), so now the script works both when navigating up and down in the list, and it will always try to put the selected item as close to the center as possible:
$('#listF').click(function(){
var n = 10;
if(this.selectedIndex+n+1 > ($(this).find('option').length)){
n=$(this).find('option').length-this.selectedIndex-1;
}
if(this.selectedIndex < n){
n=this.selectedIndex;
}
this.selectedIndex-=n;
this.selectedIndex+=2*n;
this.selectedIndex-=n;
});
Related
sry for my english. but i hope you can understand what my problem is.
i have a dropdown-menu where i have all letters from A to Z. in a list, i have a lot of names. when i select a letter in the dropdown menu, it should select the same letter in the list. that works so far, but how can i move the selected letter to the top of the list?
<div align="center"><html>
<head>
<script language="JavaScript">
function Eingabe(Wert)
{
for(i = 0; i < document.getElementById('Names').options.length; i++)
{
if(Wert.substr(0, Wert.length).toLowerCase() == document.getElementById('Names').options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length != 0)
{
document.getElementById('Names').options[i].selected = true;
break;
}
}
}
</script>
</head>
<body>
<label>Select letter:
<select name="Letters"onClick="Eingabe(this.value);" type="text"><br>
<option>---Select letter---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
...
</select>
</label>
<br>
<br>
<select id="Names" size="18">
<option value="A:">A:</option>
<option value="Adena"> -Adena</option>
<option value="Adeodata"> -Adeodata</option>
<option value="Adeodato"> -Adeodato</option>
<option value="Adeodatus"> -Adeodatus</option>
<option value="Aderito"> -Aderito</option>
<option value="Adhelm"> -Adhelm</option>
<option value="Adil"> -Adil</option>
<option value="Adina"> -Adina</option>
<option value="Adine"> -Adine</option>
<option value="Adis"> -Adis</option>
<option value="Adlai"> -Adlai</option>
<option value="Admir"> -Admir</option>
<option value="Adnan"> -Adnan</option>
<option value="Adolar"> -Adolar</option>
<option value="Adolf"> -Adolf</option>
<option value="Adolfa"> -Adolfa</option>
<option value="Adolfine"> -Adolfine</option>
<option value="Adolfo"> -Adolfo</option>
<option value="Adolph"> -Adolph</option>
<option value="Adolpha"> -Adolpha</option>
<option value="Adolphe"> -Adolphe</option>
<option value="Adolphus"> -Adolphus</option>
<option value="Adone"> -Adone</option>
<option value="Adonia"> -Adonia</option>
<option value="Adonis"> -Adonis</option>
<option value="Adora"> -Adora</option>
<option value="Adoración"> -Adoración</option>
<option value="Adria"> -Adria</option>
<option value="Adriaan"> -Adriaan</option>
<option value="Adriaen"> -Adriaen</option>
<option value="Adrián"> -Adrián</option>
<option value="Adriana"> -Adriana</option>
<option value="Adriane"> -Adriane</option>
<option value="Adrianna"> -Adrianna</option>
<option value="Adrianne"> -Adrianne</option>
<option value="Adriano"> -Adriano</option>
<option value="B:">B:</option>
<option value="Bartel"> -Bartel</option>
<option value="Barthold"> -Barthold</option>
<option value="Bartholomäa"> -Bartholomäa</option>
<option value="Bartholomaios"> -Bartholomaios</option>
<option value="Bartholomäus"> -Bartholomäus</option>
<option value="Bartholomew"> -Bartholomew</option>
<option value="Bartolmai"> -Bartolmai</option>
<option value="Bartolo"> -Bartolo</option>
<option value="Bartolomé"> -Bartolomé</option>
<option value="Bartolomea"> -Bartolomea</option>
<option value="Bartolomeo"> -Bartolomeo</option>
<option value="Bartosz"> -Bartosz</option>
<option value="Bas"> -Bas</option>
<option value="Bashkim"> -Bashkim</option>
<option value="Basia"> -Basia</option>
<option value="Basil"> -Basil</option>
<option value="Basile"> -Basile</option>
<option value="Basileios"> -Basileios</option>
<option value="Basilia"> -Basilia</option>
<option value="Basilisa"> -Basilisa</option>
<option value="Basilius"> -Basilius</option>
<option value="Basti"> -Basti</option>
<option value="Bastiaan"> -Bastiaan</option>
<option value="Bastian"> -Bastian</option>
<option value="Bastiano"> -Bastiano</option>
<option value="Bastien"> -Bastien</option>
<option value="Bathia"> -Bathia</option>
</select>
</body>
</html>
</div>
Use Element#scrollIntoView. Add the below line just before the break statement in your function Eingabe.
document.getElementById('Names').options[i].scrollIntoView();
EDIT: Also change onClick to onchange. Refer working snippet added below.
function Eingabe(Wert)
{
for(i = 0; i < document.getElementById('Names').options.length; i++)
{
if(Wert.substr(0, Wert.length).toLowerCase() == document.getElementById('Names').options[i].value.substr(0, Wert.length).toLowerCase() && Wert.length != 0)
{
document.getElementById('Names').options[i].selected = true;
document.getElementById('Names').options[i].scrollIntoView();
break;
}
}
}
<label>Select letter:
<select name="Letters" onchange="Eingabe(this.value);" type="text"><br>
<option>---Select letter---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</label>
<br>
<br>
<select id="Names" size="18">
<option value="A:">A:</option>
<option value="Adena"> -Adena</option>
<option value="Adeodata"> -Adeodata</option>
<option value="Adeodato"> -Adeodato</option>
<option value="Adeodatus"> -Adeodatus</option>
<option value="Aderito"> -Aderito</option>
<option value="Adhelm"> -Adhelm</option>
<option value="Adil"> -Adil</option>
<option value="Adina"> -Adina</option>
<option value="Adine"> -Adine</option>
<option value="Adis"> -Adis</option>
<option value="Adlai"> -Adlai</option>
<option value="Admir"> -Admir</option>
<option value="Adnan"> -Adnan</option>
<option value="Adolar"> -Adolar</option>
<option value="Adolf"> -Adolf</option>
<option value="Adolfa"> -Adolfa</option>
<option value="Adolfine"> -Adolfine</option>
<option value="Adolfo"> -Adolfo</option>
<option value="Adolph"> -Adolph</option>
<option value="Adolpha"> -Adolpha</option>
<option value="Adolphe"> -Adolphe</option>
<option value="Adolphus"> -Adolphus</option>
<option value="Adone"> -Adone</option>
<option value="Adonia"> -Adonia</option>
<option value="Adonis"> -Adonis</option>
<option value="Adora"> -Adora</option>
<option value="Adoración"> -Adoración</option>
<option value="Adria"> -Adria</option>
<option value="Adriaan"> -Adriaan</option>
<option value="Adriaen"> -Adriaen</option>
<option value="Adrián"> -Adrián</option>
<option value="Adriana"> -Adriana</option>
<option value="Adriane"> -Adriane</option>
<option value="Adrianna"> -Adrianna</option>
<option value="Adrianne"> -Adrianne</option>
<option value="Adriano"> -Adriano</option>
<option value="B:">B:</option>
<option value="Bartel"> -Bartel</option>
<option value="Barthold"> -Barthold</option>
<option value="Bartholomäa"> -Bartholomäa</option>
<option value="Bartholomaios"> -Bartholomaios</option>
<option value="Bartholomäus"> -Bartholomäus</option>
<option value="Bartholomew"> -Bartholomew</option>
<option value="Bartolmai"> -Bartolmai</option>
<option value="Bartolo"> -Bartolo</option>
<option value="Bartolomé"> -Bartolomé</option>
<option value="Bartolomea"> -Bartolomea</option>
<option value="Bartolomeo"> -Bartolomeo</option>
<option value="Bartosz"> -Bartosz</option>
<option value="Bas"> -Bas</option>
<option value="Bashkim"> -Bashkim</option>
<option value="Basia"> -Basia</option>
<option value="Basil"> -Basil</option>
<option value="Basile"> -Basile</option>
<option value="Basileios"> -Basileios</option>
<option value="Basilia"> -Basilia</option>
<option value="Basilisa"> -Basilisa</option>
<option value="Basilius"> -Basilius</option>
<option value="Basti"> -Basti</option>
<option value="Bastiaan"> -Bastiaan</option>
<option value="Bastian"> -Bastian</option>
<option value="Bastiano"> -Bastiano</option>
<option value="Bastien"> -Bastien</option>
<option value="Bathia"> -Bathia</option>
</select>
I am new in JS and I need some help. I want my 2-nd selectto appear only if the first one is already chosen, the 3-th select to appear after the second choise is done and the submit button to appear after the third choise is done.Is it possible to do that using a loop ?
<style>
select{float:left}
#month,#day,input{display:none}
</style>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
<option value="">2016</option>
<option value="">2015</option>
<option value="">2014</option>
<option value="">2013</option>
<option value="">2012</option>
<option value="">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
<option value="">2007</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="">January</option>
<option value="">February</option>
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">August</option>
<option value="">September</option>
<option value="">October</option>
<option value="">November</option>
<option value="">December</option>
</select>
<select required id='day' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
<input type="submit" class='selectOption'>
</form>
function select(par) {
var i = 0;
var x = document.getElementsByClassName('selectOption');
if (par.selectedIndex !== "0" && i<x.length) {
x[i++].style.display = 'block';
}
}
</script>
you can achieve this by hiding all select but the first one on page load and displaying them one by one after selecting the previous select.
<select required id='month' class='selectOption hide' onchange='select(this)'>
<select required id='day' class='selectOption hide' onchange='select(this)'>
plunker : http://plnkr.co/edit/oKwq0q4IB5poKuUOa6oG?p=preview
Define your function like this.
function select(par) {
if (par.selectedIndex !== 0) {
par.nextElementSibling.className = "selectOption";
}
}
I am trying to filter out this JSON object based on the country code present in the object as.
http://jsfiddle.net/870ctvnm
There is a primary selector which a user uses to select the Currency. After which I want to filter out all the available payment options based on the country code and then append the filtered object to the payment selector.
I tried using $.grep and $.filter both failed. Would be great if someone could help out here.
so, data.js contains that variable, var payments.
<label>Currency</label>
<select class="form-control" onchange="currency_update(this);">
<option>---</option> <option value="ADP">ADP</option> <option value="AED">AED</option> <option value="AFA">AFA</option> <option value="ALL">ALL</option> <option value="ANG">ANG</option> <option value="AOK">AOK</option> <option value="ARS">ARS</option> <option value="AUD">AUD</option> <option value="AWG">AWG</option> <option value="BBD">BBD</option> <option value="BDT">BDT</option> <option value="BGN">BGN</option> <option value="BHD">BHD</option> <option value="BIF">BIF</option> <option value="BMD">BMD</option> <option value="BND">BND</option> <option value="BOB">BOB</option> <option value="BRL">BRL</option> <option value="BSD">BSD</option> <option value="BTN">BTN</option> <option value="BUK">BUK</option> <option value="BWP">BWP</option> <option value="BZD">BZD</option> <option value="CAD">CAD</option> <option value="CHF">CHF</option> <option value="CLF">CLF</option> <option value="CLP">CLP</option> <option value="CNY">CNY</option> <option value="COP">COP</option> <option value="CRC">CRC</option> <option value="CZK">CZK</option> <option value="CUP">CUP</option> <option value="CVE">CVE</option> <option value="CYP">CYP</option> <option value="DKK">DKK</option> <option value="DOP">DOP</option> <option value="DZD">DZD</option> <option value="ECS">ECS</option> <option value="EGP">EGP</option> <option value="EEK">EEK</option> <option value="ETB">ETB</option> <option value="EUR">EUR</option> <option value="FJD">FJD</option> <option value="FKP">FKP</option> <option value="GBP">GBP</option> <option value="GHC">GHC</option> <option value="GIP">GIP</option> <option value="GMD">GMD</option> <option value="GNF">GNF</option> <option value="GTQ">GTQ</option> <option value="GWP">GWP</option> <option value="GYD">GYD</option> <option value="HKD">HKD</option> <option value="HNL">HNL</option> <option value="HTG">HTG</option> <option value="HUF">HUF</option> <option value="IDR">IDR</option> <option value="IEP">IEP</option> <option value="ILS">ILS</option> <option value="INR">INR</option> <option value="IQD">IQD</option> <option value="IRR">IRR</option> <option value="JMD">JMD</option> <option value="JOD">JOD</option> <option value="JPY">JPY</option> <option value="KES">KES</option> <option value="KHR">KHR</option> <option value="KMF">KMF</option> <option value="KPW">KPW</option> <option value="KRW">KRW</option> <option value="KWD">KWD</option> <option value="KYD">KYD</option> <option value="LAK">LAK</option> <option value="LBP">LBP</option> <option value="LKR">LKR</option> <option value="LRD">LRD</option> <option value="LSL">LSL</option> <option value="LYD">LYD</option> <option value="MAD">MAD</option> <option value="MGF">MGF</option> <option value="MNT">MNT</option> <option value="MOP">MOP</option> <option value="MRO">MRO</option> <option value="MTL">MTL</option> <option value="MUR">MUR</option> <option value="MVR">MVR</option> <option value="MWK">MWK</option> <option value="MXP">MXP</option> <option value="MYR">MYR</option> <option value="MZM">MZM</option> <option value="NAD">NAD</option> <option value="NGN">NGN</option> <option value="NIO">NIO</option> <option value="NOK">NOK</option> <option value="NPR">NPR</option> <option value="NZD">NZD</option> <option value="OMR">OMR</option> <option value="PAB">PAB</option> <option value="PEN">PEN</option> <option value="PGK">PGK</option> <option value="PHP">PHP</option> <option value="PKR">PKR</option> <option value="PLN">PLN</option> <option value="PYG">PYG</option> <option value="QAR">QAR</option> <option value="RON">RON</option> <option value="RWF">RWF</option> <option value="SAR">SAR</option> <option value="SBD">SBD</option> <option value="SCR">SCR</option> <option value="SDP">SDP</option> <option value="SEK">SEK</option> <option value="SGD">SGD</option> <option value="SHP">SHP</option> <option value="SLL">SLL</option> <option value="SOS">SOS</option> <option value="SRG">SRG</option> <option value="STD">STD</option> <option value="RUB">RUB</option> <option value="SVC">SVC</option> <option value="SYP">SYP</option> <option value="SZL">SZL</option> <option value="THB">THB</option> <option value="TND">TND</option> <option value="TOP">TOP</option> <option value="TPE">TPE</option> <option value="TRY">TRY</option> <option value="TTD">TTD</option> <option value="TWD">TWD</option> <option value="TZS">TZS</option> <option value="UGX">UGX</option> <option value="USD">USD</option> <option value="UYU">UYU</option> <option value="VEF">VEF</option> <option value="VND">VND</option> <option value="VUV">VUV</option> <option value="WST">WST</option> <option value="XAF">XAF</option> <option value="XAG">XAG</option> <option value="XAU">XAU</option> <option value="XCD">XCD</option> <option value="XDR">XDR</option> <option value="XOF">XOF</option> <option value="XPD">XPD</option> <option value="XPF">XPF</option> <option value="XPT">XPT</option> <option value="YDD">YDD</option> <option value="YER">YER</option> <option value="YUD">YUD</option> <option value="ZAR">ZAR</option> <option value="ZMK">ZMK</option> <option value="ZRZ">ZRZ</option> <option value="ZWD">ZWD</option> <option value="SKK">SKK</option> <option value="AMD">AMD</option>
</select>
<label>Payment Method</label>
<select id="methods"></select>
<script src="data.js"></script>
<script>
// notice: data.js contains var payments = [{ ... }];
function currency_update(elm) {
var currency = elm.value;
var i = 0;
document.getElementById('methods').innerHTML = '';
for(key in payments[0]) {
var allowed_currencies = payments[0][key].currencies || [];
if(allowed_currencies.indexOf(currency)) {
addPayment(i, key);
}
i++
}
}
function addPayment(i, key) {
document.getElementById('methods').innerHTML += '<option value="' + payments[0][key].name + '">' + payments[0][key].name + '</option>';
}
</script>
I don't use that i, but it might be useful.
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
When you have a multi-select form field such as the following, how do you get, and set the selected option values?
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
</select>
Getting the value(s)
var items = [];
$('select.items option:selected').each(function() {
items.push( this.value );
});
Is this the only way to get the array of values or is there a sleeker way?
Setting the value(s)
var items = ['apple', 'ape', 'carrot'];
$.each(items, function() {
$('select.items option[value="' + this + '"]').prop('selected', true);
});
Is there a sleeker way to do this?
It's quite straight-forward to get the selected values array; use the jQuery .val() method.
var items = $('select.items').val();
//sample result: ["apple","ape","boy","daisy","eagle"]
Please note that JavaScripts value property, which works well for other form fields, returns just the first selected value
function out( v ) {
$('pre.out').text( JSON.stringify( v ) );
}
$('select.items').on('change', function() {
out( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<pre class="out"></pre>
To set the selected values also requires no looping. Use the same jQuery .val() method.
$('select.items').val( ['apple','ape','boy','age','eagle'] );
$('button.set').on('click', function() {
$('select.items').val( ['apple','ape','boy','age','eagle'] );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<button class="set">SET</button>