React: Generate all date of birth select options

React: Generate all date of birth select options - javascript

At the moment I've got a load of HTML in my script and its ugly to scroll past, is there a way I can generate all the options from 2019 to 1900 and then just loop over them?
<select
className='form--dob-year'
name='year'
onChange={onChange}
value={year}
>
<option value='0'>Year</option>
<option value='2019'>2019</option>
<option value='2018'>2018</option>
<option value='2017'>2017</option>
<option value='2016'>2016</option>
<option value='2015'>2015</option>
<option value='2014'>2014</option>
<option value='2013'>2013</option>
<option value='2012'>2012</option>
<option value='2011'>2011</option>
<option value='2010'>2010</option>
<option value='2009'>2009</option>
<option value='2008'>2008</option>
<option value='2007'>2007</option>
<option value='2006'>2006</option>
<option value='2005'>2005</option>
<option value='2004'>2004</option>
<option value='2003'>2003</option>
<option value='2002'>2002</option>
<option value='2001'>2001</option>
<option value='2000'>2000</option>
<option value='1999'>1999</option>
<option value='1998'>1998</option>
<option value='1997'>1997</option>
<option value='1996'>1996</option>
<option value='1995'>1995</option>
<option value='1994'>1994</option>
<option value='1993'>1993</option>
<option value='1992'>1992</option>
<option value='1991'>1991</option>
<option value='1990'>1990</option>
<option value='1989'>1989</option>
<option value='1988'>1988</option>
<option value='1987'>1987</option>
<option value='1986'>1986</option>
<option value='1985'>1985</option>
<option value='1984'>1984</option>
<option value='1983'>1983</option>
<option value='1982'>1982</option>
<option value='1981'>1981</option>
<option value='1980'>1980</option>
<option value='1979'>1979</option>
<option value='1978'>1978</option>
<option value='1977'>1977</option>
<option value='1976'>1976</option>
<option value='1975'>1975</option>
<option value='1974'>1974</option>
<option value='1973'>1973</option>
<option value='1972'>1972</option>
<option value='1971'>1971</option>
<option value='1970'>1970</option>
<option value='1969'>1969</option>
<option value='1968'>1968</option>
<option value='1967'>1967</option>
<option value='1966'>1966</option>
<option value='1965'>1965</option>
<option value='1964'>1964</option>
<option value='1963'>1963</option>
<option value='1962'>1962</option>
<option value='1961'>1961</option>
<option value='1960'>1960</option>
<option value='1959'>1959</option>
<option value='1958'>1958</option>
<option value='1957'>1957</option>
<option value='1956'>1956</option>
<option value='1955'>1955</option>
<option value='1954'>1954</option>
<option value='1953'>1953</option>
<option value='1952'>1952</option>
<option value='1951'>1951</option>
<option value='1950'>1950</option>
<option value='1949'>1949</option>
<option value='1948'>1948</option>
<option value='1947'>1947</option>
<option value='1946'>1946</option>
<option value='1945'>1945</option>
<option value='1944'>1944</option>
<option value='1943'>1943</option>
<option value='1942'>1942</option>
<option value='1941'>1941</option>
<option value='1940'>1940</option>
<option value='1939'>1939</option>
<option value='1938'>1938</option>
<option value='1937'>1937</option>
<option value='1936'>1936</option>
<option value='1935'>1935</option>
<option value='1934'>1934</option>
<option value='1933'>1933</option>
<option value='1932'>1932</option>
<option value='1931'>1931</option>
<option value='1930'>1930</option>
<option value='1929'>1929</option>
<option value='1928'>1928</option>
<option value='1927'>1927</option>
<option value='1926'>1926</option>
<option value='1925'>1925</option>
<option value='1924'>1924</option>
<option value='1923'>1923</option>
<option value='1922'>1922</option>
<option value='1921'>1921</option>
<option value='1920'>1920</option>
<option value='1919'>1919</option>
<option value='1918'>1918</option>
<option value='1917'>1917</option>
<option value='1916'>1916</option>
<option value='1915'>1915</option>
<option value='1914'>1914</option>
<option value='1913'>1913</option>
<option value='1912'>1912</option>
<option value='1911'>1911</option>
<option value='1910'>1910</option>
<option value='1909'>1909</option>
<option value='1908'>1908</option>
<option value='1907'>1907</option>
<option value='1906'>1906</option>
<option value='1905'>1905</option>
<option value='1904'>1904</option>
<option value='1903'>1903</option>
<option value='1902'>1902</option>
<option value='1901'>1901</option>
<option value='1900'>1900</option>
</select>
```

Just use a for loop. Create a function that returns an array of JSX.Element:
const generateYearOptions = () => {
const arr = [];
const startYear = 1900;
const endYear = new Date().getFullYear();
for (let i = endYear; i >= startYear; i--) {
arr.push(<option value={i}>{i}</option>);
}
return arr;
};
Then in your component:
<select
className='form--dob-year'
name='year'
onChange={onChange}
value={year}
>
<option value='0'>Year</option>
{generateYearOptions()}
</select>

Related

i need help i have problem with sub option problem how to fix?

after select bmw and select option m5 option. m5 is not showing how to fix this problem ?
i need select bmw and sub option m5 ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select>
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

Your issue is because you are hiding the select in your .change function. The way you currently have it written, your .change is going to fire for every select on the page. That isn't what you want here based on your issue.
If you don't want to hide the second box you either need to assign and id or class to the first select or you could use the :first selector.
Example: This example shows with the :first selector.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select:first").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select>
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
Or you can assign an id/class to the select.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#typeSelect").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select id="typeSelect">
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
There are 20 ways to skin this cat, you just need to limit your $(select) scope a bit.

How to Link to a Selected Drop-Down Item to Open a Web Page

I am trying to create a form which has city and social networking filter. I want to capture both the city and social networking value as i want to store the value and i want my form to redirect to social networking site on submit button. Suppose if i choose facebook, i want facebook homepage to open on submit button. My page is not getting redirected. here is my code
<script type="text/javascript">
function actionDef() {
var option_selected = $('purposeId').value();
console.log = option_selected;
if( option_selected=="gl" ) {
document.getElementById("search-form").action = "https://www.google.co.in/";
}
else if( option_selected=="y" ) {
document.getElementById("search-form").action = "https://in.yahoo.com/?p=us";
}
else if( option_selected=="fb" ) {
document.getElementById("search-form").action = "http://www.facebook.com/";
}
}
</script>
<form action="/" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical">
<div class="city">
<label for="cityId" class="required">Enter your city</label>
<select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city">
<option value="9">Bangalore</option>
<option value="20">Chennai</option>
<option value="27">Faridabad</option>
<option value="28">Ghaziabad</option>
<option value="32">Gurgaon</option>
<option value="36">Howrah</option>
<option value="38">Hyderabad</option>
<option value="49">Kolkata</option>
<option value="57">Mumbai</option>
<option value="61">Navi Mumbai</option>
<option value="63" selected="selected">New Delhi</option>
<option value="89">Noida</option>
<option value="70">Pune</option>
<option value="76">Secunderabad</option>
<option value="79">Thane</option>
<option value="92">Agra</option>
<option value="1">Ahmedabad</option>
<option value="208">Ahmednagar</option>
<option value="93">Ajmer</option>
<option value="2">Akola</option>
<option value="295">Alappuzha</option>
<option value="209">Aligarh</option>
<option value="3">Allahabad</option>
<option value="140">Alleppey</option>
<option value="294">Aluva</option>
<option value="4">Alwar</option>
<option value="94">Ambala</option>
<option value="141">Amravati</option>
<option value="5">Amritsar</option>
<option value="6">Anand</option>
<option value="112">Anantapur</option>
<option value="255">Anantnag</option>
<option value="7">Ankleshwar</option>
<option value="210">Arakkonam</option>
<option value="256">Asansol</option>
<option value="8">Aurangabad</option>
<option value="297">Avadi</option>
<option value="211">Baddi</option>
<option value="302">Bagalkot</option>
<option value="9">Bangalore</option>
<option value="142">Bardoli</option>
<option value="10">Bareilly</option>
<option value="212">Barkathpura</option>
<option value="11">Baroda</option>
<option value="213">Batala</option>
<option value="214">Beawar</option>
<option value="12">Belgaum</option>
<option value="113">Bellary</option>
<option value="267">Berhampur</option>
<option value="13">Bharuch</option>
<option value="91">Bhatinda</option>
<option value="143">Bhavnagar</option>
<option value="257">Bhilai</option>
<option value="17">Bhilwara</option>
<option value="215">Bhimavaram</option>
<option value="144">Bhiwandi</option>
<option value="14">Bhopal</option>
<option value="15">Bhubaneshwar</option>
<option value="145">Bhuj</option>
<option value="288">Bidar</option>
<option value="301">Bijapur</option>
<option value="16">Bikaner</option>
<option value="216">Bilaspur</option>
<option value="146">Boisar</option>
<option value="258">Bokaro</option>
<option value="18">Calicut</option>
<option value="19">Chandigarh</option>
<option value="217">Chandrapur</option>
<option value="147">Changanacherry</option>
<option value="275">Chankheda</option>
<option value="20">Chennai</option>
<option value="96">Chidambaram</option>
<option value="290">Chitradurga</option>
<option value="300">Chokodi</option>
<option value="21">Cochin</option>
<option value="22">Coimbatore</option>
<option value="148">Cuddalore</option>
<option value="23">Cuttack</option>
<option value="149">Dahanu</option>
<option value="150">Dahej</option>
<option value="151">Daman</option>
<option value="273">Dausa</option>
<option value="152">Davangere</option>
<option value="105">Dehradun</option>
<option value="24">Delhi</option>
<option value="218">Derabassi</option>
<option value="25">Dewas</option>
<option value="95">Dhanbad</option>
<option value="97">Dharwad</option>
<option value="26">Dhule</option>
<option value="219">Dindigul</option>
<option value="220">Durg</option>
<option value="153">Durgapur</option>
<option value="98">Eluru</option>
<option value="106">Ernakulam</option>
<option value="99">Erode</option>
<option value="221">Faizabad</option>
<option value="27">Faridabad</option>
<option value="222">Firozabad</option>
<option value="154">Gandhidham</option>
<option value="253">Gandhinagar</option>
<option value="107">Gangtok</option>
<option value="28">Ghaziabad</option>
<option value="29">Goa</option>
<option value="299">Gokak</option>
<option value="259">Gorakhpur</option>
<option value="30">Gulbarga</option>
<option value="31">Guntur</option>
<option value="32">Gurgaon</option>
<option value="114">Guwahati</option>
<option value="33">Gwalior</option>
<option value="108">Haldwani</option>
<option value="223">Hapur</option>
<option value="155">Haridwar</option>
<option value="289">Harpanahalli</option>
<option value="129">Hassan</option>
<option value="287">Haveri</option>
<option value="264">Hazirabagh</option>
<option value="34">Himmatnagar</option>
<option value="109">Hissar</option>
<option value="156">Hoshiarpur</option>
<option value="157">Hospet</option>
<option value="35">Hosur</option>
<option value="36">Howrah</option>
<option value="37">Hubli</option>
<option value="38">Hyderabad</option>
<option value="293">Idukki</option>
<option value="39">Indore</option>
<option value="40">Jabalpur</option>
<option value="41">Jaipur</option>
<option value="45">Jalandhar</option>
<option value="131">Jalgaon</option>
<option value="224">Jalna</option>
<option value="260">Jammu</option>
<option value="42">Jamnagar</option>
<option value="43">Jamshedpur</option>
<option value="225">Jhansi</option>
<option value="44">Jodhpur</option>
<option value="46">Junagadh</option>
<option value="284">Kadappa</option>
<option value="110">Kakinada</option>
<option value="158">Kalka</option>
<option value="279">Kallakurichi</option>
<option value="159">Kalyan</option>
<option value="160">Kancheepuran</option>
<option value="100">Kankroli</option>
<option value="161">Kannur</option>
<option value="47">Kanpur</option>
<option value="132">Kanyakumari</option>
<option value="162">Kapurthala</option>
<option value="163">Karad</option>
<option value="164">Karaikudi</option>
<option value="226">Karimnagar</option>
<option value="111">Karnal</option>
<option value="165">Karur</option>
<option value="286">Karwar</option>
<option value="283">Kasaragode</option>
<option value="227">Katni</option>
<option value="228">Khammam</option>
<option value="266">Khandwa</option>
<option value="166">Khanna</option>
<option value="265">Khargone</option>
<option value="305">Kolar</option>
<option value="48">Kolhapur</option>
<option value="49">Kolkata</option>
<option value="167">Kollam</option>
<option value="50">Kota</option>
<option value="90">Kottayam</option>
<option value="168">Kovilatti</option>
<option value="115">Kozhikode</option>
<option value="169">Kumbakonam</option>
<option value="116">Kurnool</option>
<option value="170">Kurukshetra</option>
<option value="136">Lathur</option>
<option value="51">Lucknow</option>
<option value="52">Ludhiana</option>
<option value="53">Madurai</option>
<option value="254">Mahabubnagar</option>
<option value="54">Mahad</option>
<option value="278">Malappuram</option>
<option value="282">Mandya</option>
<option value="55">Mangalore</option>
<option value="139">Mangan</option>
<option value="101">Manipal</option>
<option value="171">Manjeri</option>
<option value="130">Mansarovar</option>
<option value="172">Mapusa</option>
<option value="229">Mathura</option>
<option value="292">Mavelikara</option>
<option value="173">Meerut</option>
<option value="56">Mehsana</option>
<option value="174">Moga</option>
<option value="137">Mohali</option>
<option value="175">Morvi</option>
<option value="298">Mudhol</option>
<option value="57">Mumbai</option>
<option value="58">Mysore</option>
<option value="176">Nabha</option>
<option value="177">Nadiad</option>
<option value="117">Nagercoil</option>
<option value="59">Nagpur</option>
<option value="230">Nanded</option>
<option value="231">Nandyal</option>
<option value="277">Narsipatnam</option>
<option value="60">Nashik</option>
<option value="61">Navi Mumbai</option>
<option value="178">Navsari</option>
<option value="304">Neelamangala</option>
<option value="62">Nellore</option>
<option value="63">New Delhi</option>
<option value="232">Nizamabad</option>
<option value="89">Noida</option>
<option value="274">Nokha</option>
<option value="233">Ongole</option>
<option value="179">Palakkad</option>
<option value="261">Palanpur</option>
<option value="268">Palghar</option>
<option value="234">Pali</option>
<option value="138">Panchkulla</option>
<option value="180">Panipat</option>
<option value="181">Panjim</option>
<option value="64">Panvel</option>
<option value="235">Parbhani</option>
<option value="182">Patalganga</option>
<option value="183">Pathanamthitta</option>
<option value="236">Pathankot</option>
<option value="65">Patiala</option>
<option value="66">Patna</option>
<option value="67">Pen</option>
<option value="184">Phagwara</option>
<option value="68">Pithampur</option>
<option value="185">Pollachi</option>
<option value="186">Ponda</option>
<option value="102">Pondichery</option>
<option value="69">Porbunder</option>
<option value="296">Poruru</option>
<option value="187">Porvorim</option>
<option value="188">Pudukottai</option>
<option value="70">Pune</option>
<option value="237">Raichur</option>
<option value="238">Raigarh</option>
<option value="71">Raipur</option>
<option value="72">Rajkot</option>
<option value="73">Rajmundry</option>
<option value="239">Rajnandgaon</option>
<option value="189">Rajpura</option>
<option value="74">Ranchi</option>
<option value="240">Ranipet</option>
<option value="75">Ratlam</option>
<option value="133">Ratnagiri</option>
<option value="190">Rewari</option>
<option value="241">Rohtak</option>
<option value="191">Ropar</option>
<option value="118">Rourkela</option>
<option value="192">Rudrapur</option>
<option value="242">Saharanpur</option>
<option value="103">Salem</option>
<option value="285">Sangareddy</option>
<option value="134">Sangli</option>
<option value="193">Sangrur</option>
<option value="135">Satara</option>
<option value="76">Secunderabad</option>
<option value="119">Shimla</option>
<option value="243">Shimoga</option>
<option value="262">Sikar</option>
<option value="120">Silchar</option>
<option value="121">Siliguri</option>
<option value="77">Silvassa</option>
<option value="244">Sirsa</option>
<option value="245">Sitapur</option>
<option value="194">Sivakasi</option>
<option value="195">Sohana</option>
<option value="246">Solan</option>
<option value="196">Solapur</option>
<option value="197">Sonepat</option>
<option value="247">Sri Ganganagar</option>
<option value="248">Srikakulam</option>
<option value="263">Srinagar</option>
<option value="78">Surat</option>
<option value="269">Swargate</option>
<option value="249">Tadepalligudem</option>
<!--<option value="250">Tamilnadu</option> -->
<option value="122">Tanjore</option>
<option value="79">Thane</option>
<option value="198">Thanjavur</option>
<option value="281">Theni</option>
<option value="123">Thiruvananthapuram</option>
<option value="280">Thiruvannamalai</option>
<option value="291">Thripunithura</option>
<option value="124">Thrissur</option>
<option value="125">Tirunelveli</option>
<option value="126">Tirupathi</option>
<option value="251">Tirupur</option>
<option value="199">Tiruvalla</option>
<option value="272">Tonk</option>
<option value="104">Trichur</option>
<option value="80">Trichy</option>
<option value="81">Trivandrum</option>
<option value="200">Tumkur</option>
<option value="82">Udaipur</option>
<option value="201">Udupi</option>
<option value="83">Ujjain</option>
<option value="202">Unjha</option>
<option value="84">Valsad</option>
<option value="85">Vapi</option>
<option value="86">Varanasi</option>
<option value="276">Vastral</option>
<option value="127">Vellore</option>
<option value="203">Veraval</option>
<option value="87">Vijayawada</option>
<option value="204">Villupuram</option>
<option value="205">Virudhachalam</option>
<option value="206">Virudhunagar</option>
<option value="88">Vizag</option>
<option value="128">Warangal</option>
<option value="271">Wardha</option>
<option value="252">Yamunanagar</option>
<option value="270">Yavatmal</option>
<option value="303">Yelanka</option>
<option value="207">Zirakpur</option>
</select>
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="purpose">
<label for="purposeId" class="required">Enter Type</label>
<select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type" onChange="actionDef()">
<option value="select_purpose" selected="selected">Selelct Type</option>
<option value="1" id="gl">Google</option>
<option value="2" id="y">Yahoo</option>
<option value="3" id="fb">Facebook</option>
</select>
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span>
</div>
<div class="show-ofr">
<input type="submit" name="button" class="btn btn-primary btn-block">
</div>
</form>

try the below code, the problem is the way you process your value from select field.
JavaScript
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
jQuery(function($) {
// bind change event to select
$('#purposeId').on('change', function() {
var url = $(this).val(); // get selected value
alert(url);
if (url == "1") {
document.getElementById("search-form").action = "https://www.google.co.in/";
} else if (url == "2") {
document.getElementById("search-form").action = "https://in.yahoo.com/?p=us";
} else if (url == "3") {
document.getElementById("search-form").action = "http://www.facebook.com/";
}
});
});
</script>
HTML
<form action="" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical">
<div class="city">
<label for="cityId" class="required">Enter your city</label>
<select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city">
<option value="88">Vizag</option>
<option value="128">Warangal</option>
<option value="271">Wardha</option>
<option value="252">Yamunanagar</option>
<option value="270">Yavatmal</option>
<option value="303">Yelanka</option>
<option value="207">Zirakpur</option>
</select>
<span id="city-not-selected-error" class="help-inline"></span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="purpose">
<label for="purposeId" class="required">Enter Type</label>
<select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type">
<option value="select_purpose" selected="selected">Selelct Type</option>
<option value="1" id="gl">Google</option>
<option value="2" id="y">Yahoo</option>
<option value="3" id="fb">Facebook</option>
</select>
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span>
</div>
<div class="show-ofr">
<input type="submit" name="button" class="btn btn-primary btn-block">
</div>
</form>

How do I grab the option text from a value

So I have this snippet of HTML:
<div class="col-md-3">
<div class="form-group">
<select id="billcountry" class="form-control" name="bill_country" onchange="alert(this.value); console.log(this);" tabindex="16">
<option value="USA">United States</option>
<option value="CAN">Canada</option>
<option value="AFGH">Afghanistan</option>
<option value="ALBA">Albania</option>
<option value="ALGE">Algeria</option>
<option value="ANGO">Angola</option>
<option value="ANGU">Anguilla</option>
<option value="ANTA">Antartica</option>
<option value="ANTI">Antigua & Barbuda</option>
<option value="ARGE">Argentina</option>
<option value="ARME">Armenia</option>
<option value="ARUB">Aruba</option>
<option value="AUST">Austria</option>
<option value="AUS">Australia</option>
<option value="AZER">Azerbaijan</option>
<option value="BAHA">Bahamas</option>
<option value="BAHR">Bahrain</option>
<option value="BANG">Bangladesh</option>
<option value="BARB">Barbados</option>
<option value="BELA">Belarus</option>
<option value="BELG">Belgium</option>
<option value="BELI">Belize</option>
<option value="BENI">Benin</option>
<option value="BERM">Bermuda</option>
<option value="BHUT">Bhutan</option>
<option value="BOLI">Bolivia</option>
<option value="BORN">Borneo</option>
<option value="BOSN">Bosnia</option>
<option value="BOTS">Botswana</option>
<option value="BRAZ">Brazil</option>
<option value="BRIO">British Indian Ocean Territories</option>
<option value="BRVI">British Virgin Islands</option>
<option value="BRUN">Brunei</option>
<option value="BULG">Bulgaria</option>
<option value="BURK">Burkina Faso</option>
<option value="BURU">Burundi</option>
<option value="CAMB">Cambodia</option>
<option value="CAME">Cameroon</option>
<option value="CAPV">Cape Verde Island</option>
<option value="CAYM">Cayman Islands</option>
<option value="CAFR">Central African Republic</option>
<option value="CHAD">Chad</option>
<option value="CHIL">Chile</option>
<option value="CHIN">China</option>
<option value="COLO">Colombia</option>
<option value="COMO">Comoros</option>
<option value="CONG">Congo</option>
<option value="COST">Costa Rica</option>
<option value="IVOR">Cote D'ivoire</option>
<option value="CROA">Croatia</option>
<option value="CUBA">Cuba</option>
<option value="CYPR">Cyprus</option>
<option value="CZEC">Czech Republic</option>
<option value="DENM">Denmark</option>
<option value="DJIB">Djibouti</option>
<option value="DOMI">Dominican Republic</option>
<option value="ECUA">Ecuador</option>
<option value="EGYP">Egypt</option>
<option value="ELSA">El Salvador</option>
<option value="ENGL">England</option>
<option value="EQGU">Equatorial Guinea</option>
<option value="ERIT">Eritrea</option>
<option value="ESTO">Estonia</option>
<option value="ETHI">Ethiopia</option>
<option value="FALK">Falkland Islands</option>
<option value="FARO">Faroe Islands</option>
<option value="FIJI">Fiji</option>
<option value="FINL">Finland</option>
<option value="FRAN">France</option>
<option value="FRGU">French Guiana</option>
<option value="POLY">French Polynesia</option>
<option value="FRST">French So Territories</option>
<option value="GABO">Gabon</option>
<option value="GAMB">Gambia</option>
<option value="GEOR">Georgia</option>
<option value="GERM">Germany</option>
<option value="GHAN">Ghana</option>
<option value="GIBR">Gibraltar</option>
<option value="GREC">Greece</option>
<option value="GREE">Greenland</option>
<option value="GREN">Grenada</option>
<option value="GUAD">Guadeloupe</option>
<option value="GUAT">Guatemala</option>
<option value="GUIB">Guinea-bissau</option>
<option value="GUYA">Guyana</option>
<option value="HAIT">Haiti</option>
<option value="HOND">Honduras</option>
<option value="HONG">Hong Kong</option>
<option value="HUNG">Hungary</option>
<option value="ICEL">Iceland</option>
<option value="INDI">India</option>
<option value="INDO">Indonesia</option>
<option value="IRAN">Iran</option>
<option value="IRAQ">Iraq</option>
<option value="IREL">Ireland</option>
<option value="ISRA">Israel</option>
<option value="ITAL">Italy</option>
<option value="JAMA">Jamaica</option>
<option value="JAPA">Japan</option>
<option value="JORD">Jordan</option>
<option value="KAZA">Kazakhstan</option>
<option value="KENY">Kenya</option>
<option value="KUWA">Kuwait</option>
<option value="KYRG">Kyrgyzstan</option>
<option value="LAOS">Laos</option>
<option value="LATV">Latvia</option>
<option value="LEBA">Lebanon</option>
<option value="LESO">Lesotho</option>
<option value="LIBE">Liberia</option>
<option value="LIBY">Libya</option>
<option value="LIEC">Liechtenstien</option>
<option value="LITH">Lithuania</option>
<option value="LUXE">Luxembourg</option>
<option value="MACA">Macau</option>
<option value="MACE">Macedonia</option>
<option value="MADA">Madagascar</option>
<option value="MALW">Malawi</option>
<option value="MALA">Malaysia</option>
<option value="MALD">Maldives</option>
<option value="MALI">Mali</option>
<option value="MALT">Malta</option>
<option value="MART">Martinique</option>
<option value="MAUA">Mauritania</option>
<option value="MAUS">Mauritius</option>
<option value="MAYO">Mayotte</option>
<option value="MEXI">Mexico</option>
<option value="MOLD">Moldova</option>
<option value="MONA">Monaco</option>
<option value="MONG">Mongolia</option>
<option value="MONT">Montserrat</option>
<option value="MORO">Morocco</option>
<option value="MOZA">Mozambique</option>
<option value="MYAN">Myanmar</option>
<option value="NIRE">N Ireland</option>
<option value="NAMI">Namibia</option>
<option value="NEPA">Nepal</option>
<option value="NETH">Netherlands</option>
<option value="NANT">Netherlands Antilles</option>
<option value="NCAL">New Caledonia</option>
<option value="NGUI">New Guinea</option>
<option value="NZEA">New Zealand</option>
<option value="NICA">Nicaragua</option>
<option value="NIGE">Niger</option>
<option value="NIGA">Nigeria</option>
<option value="NKOR">North Korea</option>
<option value="NORW">Norway</option>
<option value="OMAN">Oman</option>
<option value="PAKI">Pakistan</option>
<option value="PANA">Panama</option>
<option value="PAPU">Papua New Guinea</option>
<option value="PARA">Paraguay</option>
<option value="PERU">Peru</option>
<option value="PHIL">Philippines</option>
<option value="POLA">Poland</option>
<option value="PORT">Portugal</option>
<option value="ANDO">Principality Of Andorra</option>
<option value="QATA">Qatar</option>
<option value="ROMA">Romania</option>
<option value="RUSS">Russia</option>
<option value="RWAN">Rwanda</option>
<option value="SGEO">S Georgia & S Sandwich Isls</option>
<option value="SOMO">Samoa (western)</option>
<option value="SANM">San Marino</option>
<option value="SAOT">Sao Tome & Principe</option>
<option value="SAUD">Saudi Arabia</option>
<option value="SCOT">Scotland</option>
<option value="SENE">Senegal</option>
<option value="SEYC">Seychelles Island</option>
<option value="SIER">Sierra Leone</option>
<option value="SING">Singapore</option>
<option value="SLVK">Slovakia</option>
<option value="SLVN">Slovenia</option>
<option value="SOLO">Solomon Island</option>
<option value="SOMA">Somalia</option>
<option value="SAFR">South Africa</option>
<option value="SKOR">South Korea</option>
<option value="SPAI">Spain</option>
<option value="SRIL">Sri Lanka</option>
<option value="STHL">St Helena</option>
<option value="STKN">St Kitts & Nevis</option>
<option value="STLU">St Lucia</option>
<option value="STPM">St Pierre & Miquelon</option>
<option value="STVG">St Vincent & The Grenadines</option>
<option value="SUDA">Sudan</option>
<option value="SURI">Suriname</option>
<option value="SWAZ">Swaziland</option>
<option value="SWED">Sweden</option>
<option value="SWIT">Switzerland</option>
<option value="SYRI">Syria</option>
<option value="TAIW">Taiwan</option>
<option value="TANZ">Tanzania</option>
<option value="THAI">Thailand</option>
<option value="TOGO">Togo</option>
<option value="TONG">Tonga</option>
<option value="TRIN">Trinidad & Tobago</option>
<option value="TUNI">Tunisia</option>
<option value="TURK">Turkey</option>
<option value="TURC">Turks & Caicos Islands</option>
<option value="UGAN">Uganda</option>
<option value="UKRA">Ukraine</option>
<option value="UAE">United Arab Emirates</option>
<option value="URUG">Uruguay</option>
<option value="UZBE">Uzbekistan</option>
<option value="VATI">Vatican</option>
<option value="VENE">Venezuela</option>
<option value="VIET">Vietnam</option>
<option value="WALE">Wales</option>
<option value="WFIS">Wallis & Futuna Islands</option>
<option value="SAHA">Western Sahara</option>
<option value="WSAM">Western Samoa</option>
<option value="YEME">Yemen</option>
<option value="YUGO">Yugoslavia</option>
<option value="ZAIR">Zaire</option>
<option value="ZAMB">Zambia</option>
<option value="ZIMB">Zimbabwe</option>
</select>
</div>
</div>
And as you can see, when the value of the <select> changes, the new value is passed to an alert currently.
I have looked all over for a solution (without jQuery to grab the options text based solely off of the value.
So if the select were changed to value USA, I have attempted (and failed) at getting the words United States
Any thoughts on how to efficiently go about this without using jQuery or having to loop through each option and checking its value and then grabbing its innerHTML if it matches?
**EDIT: ** I am searching for the actual TEXT and not the VALUE. Why this isn't duplicate.

Avoid using JavaScript inside and element.
You can try this:
var select = document.getElementById('billcountry');
select.addEventListener('change', function () {
console.log(this.options[this.selectedIndex].text);
});

You can use this to get the text of the selected element:
this[this.selectedIndex].innerHTML
<div class="col-md-3">
<div class="form-group">
<select id="billcountry" class="form-control" name="bill_country" onchange="alert(this[this.selectedIndex].innerHTML); console.log(this);" tabindex="16">
<option value="USA">United States</option>
<option value="CAN">Canada</option>
<option value="AFGH">Afghanistan</option>
<option value="ALBA">Albania</option>
<option value="ALGE">Algeria</option>
<option value="ANGO">Angola</option>
<option value="ANGU">Anguilla</option>
<option value="ANTA">Antartica</option>
<option value="ANTI">Antigua & Barbuda</option>
<option value="ARGE">Argentina</option>
<option value="ARME">Armenia</option>
<option value="ARUB">Aruba</option>
<option value="AUST">Austria</option>
<option value="AUS">Australia</option>
<option value="AZER">Azerbaijan</option>
<option value="BAHA">Bahamas</option>
<option value="BAHR">Bahrain</option>
<option value="BANG">Bangladesh</option>
<option value="BARB">Barbados</option>
<option value="BELA">Belarus</option>
<option value="BELG">Belgium</option>
<option value="BELI">Belize</option>
<option value="BENI">Benin</option>
<option value="BERM">Bermuda</option>
<option value="BHUT">Bhutan</option>
<option value="BOLI">Bolivia</option>
<option value="BORN">Borneo</option>
<option value="BOSN">Bosnia</option>
<option value="BOTS">Botswana</option>
<option value="BRAZ">Brazil</option>
<option value="BRIO">British Indian Ocean Territories</option>
<option value="BRVI">British Virgin Islands</option>
<option value="BRUN">Brunei</option>
<option value="BULG">Bulgaria</option>
<option value="BURK">Burkina Faso</option>
<option value="BURU">Burundi</option>
<option value="CAMB">Cambodia</option>
<option value="CAME">Cameroon</option>
<option value="CAPV">Cape Verde Island</option>
<option value="CAYM">Cayman Islands</option>
<option value="CAFR">Central African Republic</option>
<option value="CHAD">Chad</option>
<option value="CHIL">Chile</option>
<option value="CHIN">China</option>
<option value="COLO">Colombia</option>
<option value="COMO">Comoros</option>
<option value="CONG">Congo</option>
<option value="COST">Costa Rica</option>
<option value="IVOR">Cote D'ivoire</option>
<option value="CROA">Croatia</option>
<option value="CUBA">Cuba</option>
<option value="CYPR">Cyprus</option>
<option value="CZEC">Czech Republic</option>
<option value="DENM">Denmark</option>
<option value="DJIB">Djibouti</option>
<option value="DOMI">Dominican Republic</option>
<option value="ECUA">Ecuador</option>
<option value="EGYP">Egypt</option>
<option value="ELSA">El Salvador</option>
<option value="ENGL">England</option>
<option value="EQGU">Equatorial Guinea</option>
<option value="ERIT">Eritrea</option>
<option value="ESTO">Estonia</option>
<option value="ETHI">Ethiopia</option>
<option value="FALK">Falkland Islands</option>
<option value="FARO">Faroe Islands</option>
<option value="FIJI">Fiji</option>
<option value="FINL">Finland</option>
<option value="FRAN">France</option>
<option value="FRGU">French Guiana</option>
<option value="POLY">French Polynesia</option>
<option value="FRST">French So Territories</option>
<option value="GABO">Gabon</option>
<option value="GAMB">Gambia</option>
<option value="GEOR">Georgia</option>
<option value="GERM">Germany</option>
<option value="GHAN">Ghana</option>
<option value="GIBR">Gibraltar</option>
<option value="GREC">Greece</option>
<option value="GREE">Greenland</option>
<option value="GREN">Grenada</option>
<option value="GUAD">Guadeloupe</option>
<option value="GUAT">Guatemala</option>
<option value="GUIB">Guinea-bissau</option>
<option value="GUYA">Guyana</option>
<option value="HAIT">Haiti</option>
<option value="HOND">Honduras</option>
<option value="HONG">Hong Kong</option>
<option value="HUNG">Hungary</option>
<option value="ICEL">Iceland</option>
<option value="INDI">India</option>
<option value="INDO">Indonesia</option>
<option value="IRAN">Iran</option>
<option value="IRAQ">Iraq</option>
<option value="IREL">Ireland</option>
<option value="ISRA">Israel</option>
<option value="ITAL">Italy</option>
<option value="JAMA">Jamaica</option>
<option value="JAPA">Japan</option>
<option value="JORD">Jordan</option>
<option value="KAZA">Kazakhstan</option>
<option value="KENY">Kenya</option>
<option value="KUWA">Kuwait</option>
<option value="KYRG">Kyrgyzstan</option>
<option value="LAOS">Laos</option>
<option value="LATV">Latvia</option>
<option value="LEBA">Lebanon</option>
<option value="LESO">Lesotho</option>
<option value="LIBE">Liberia</option>
<option value="LIBY">Libya</option>
<option value="LIEC">Liechtenstien</option>
<option value="LITH">Lithuania</option>
<option value="LUXE">Luxembourg</option>
<option value="MACA">Macau</option>
<option value="MACE">Macedonia</option>
<option value="MADA">Madagascar</option>
<option value="MALW">Malawi</option>
<option value="MALA">Malaysia</option>
<option value="MALD">Maldives</option>
<option value="MALI">Mali</option>
<option value="MALT">Malta</option>
<option value="MART">Martinique</option>
<option value="MAUA">Mauritania</option>
<option value="MAUS">Mauritius</option>
<option value="MAYO">Mayotte</option>
<option value="MEXI">Mexico</option>
<option value="MOLD">Moldova</option>
<option value="MONA">Monaco</option>
<option value="MONG">Mongolia</option>
<option value="MONT">Montserrat</option>
<option value="MORO">Morocco</option>
<option value="MOZA">Mozambique</option>
<option value="MYAN">Myanmar</option>
<option value="NIRE">N Ireland</option>
<option value="NAMI">Namibia</option>
<option value="NEPA">Nepal</option>
<option value="NETH">Netherlands</option>
<option value="NANT">Netherlands Antilles</option>
<option value="NCAL">New Caledonia</option>
<option value="NGUI">New Guinea</option>
<option value="NZEA">New Zealand</option>
<option value="NICA">Nicaragua</option>
<option value="NIGE">Niger</option>
<option value="NIGA">Nigeria</option>
<option value="NKOR">North Korea</option>
<option value="NORW">Norway</option>
<option value="OMAN">Oman</option>
<option value="PAKI">Pakistan</option>
<option value="PANA">Panama</option>
<option value="PAPU">Papua New Guinea</option>
<option value="PARA">Paraguay</option>
<option value="PERU">Peru</option>
<option value="PHIL">Philippines</option>
<option value="POLA">Poland</option>
<option value="PORT">Portugal</option>
<option value="ANDO">Principality Of Andorra</option>
<option value="QATA">Qatar</option>
<option value="ROMA">Romania</option>
<option value="RUSS">Russia</option>
<option value="RWAN">Rwanda</option>
<option value="SGEO">S Georgia & S Sandwich Isls</option>
<option value="SOMO">Samoa (western)</option>
<option value="SANM">San Marino</option>
<option value="SAOT">Sao Tome & Principe</option>
<option value="SAUD">Saudi Arabia</option>
<option value="SCOT">Scotland</option>
<option value="SENE">Senegal</option>
<option value="SEYC">Seychelles Island</option>
<option value="SIER">Sierra Leone</option>
<option value="SING">Singapore</option>
<option value="SLVK">Slovakia</option>
<option value="SLVN">Slovenia</option>
<option value="SOLO">Solomon Island</option>
<option value="SOMA">Somalia</option>
<option value="SAFR">South Africa</option>
<option value="SKOR">South Korea</option>
<option value="SPAI">Spain</option>
<option value="SRIL">Sri Lanka</option>
<option value="STHL">St Helena</option>
<option value="STKN">St Kitts & Nevis</option>
<option value="STLU">St Lucia</option>
<option value="STPM">St Pierre & Miquelon</option>
<option value="STVG">St Vincent & The Grenadines</option>
<option value="SUDA">Sudan</option>
<option value="SURI">Suriname</option>
<option value="SWAZ">Swaziland</option>
<option value="SWED">Sweden</option>
<option value="SWIT">Switzerland</option>
<option value="SYRI">Syria</option>
<option value="TAIW">Taiwan</option>
<option value="TANZ">Tanzania</option>
<option value="THAI">Thailand</option>
<option value="TOGO">Togo</option>
<option value="TONG">Tonga</option>
<option value="TRIN">Trinidad & Tobago</option>
<option value="TUNI">Tunisia</option>
<option value="TURK">Turkey</option>
<option value="TURC">Turks & Caicos Islands</option>
<option value="UGAN">Uganda</option>
<option value="UKRA">Ukraine</option>
<option value="UAE">United Arab Emirates</option>
<option value="URUG">Uruguay</option>
<option value="UZBE">Uzbekistan</option>
<option value="VATI">Vatican</option>
<option value="VENE">Venezuela</option>
<option value="VIET">Vietnam</option>
<option value="WALE">Wales</option>
<option value="WFIS">Wallis & Futuna Islands</option>
<option value="SAHA">Western Sahara</option>
<option value="WSAM">Western Samoa</option>
<option value="YEME">Yemen</option>
<option value="YUGO">Yugoslavia</option>
<option value="ZAIR">Zaire</option>
<option value="ZAMB">Zambia</option>
<option value="ZIMB">Zimbabwe</option>
</select> </div>
</div>

You can use the following code to achieve that. this (the select) contains an attribute options with all the option elements. It also has the current selectedIndex.
<select id="billcountry" class="form-control" name="bill_country" onchange="alert(this.options[this.selectedIndex].text); console.log(this);" tabindex="16">
Jsfiddle

You could use the element.querySelector['value='] to grab the option element by value and then grab the innerHTML property.
According to MDN, element.querySelector() "returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors." So it will have to search through each option element until it finds what it's looking for.
Here's an example:
HTML
<select name="color" id="color" onChange="handleChange.call(this)">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
JS Change Function
function handleChange(){
console.log(document.querySelector("[value=" + this.value + "]").innerHTML);
}

Get option value in form, then use it in a url

I have a form where you can select a nation, the nation contains a value. For example 34 with that value,<br> I can get a image if you put it in a url like 'http://packarmy.nl/img/nation/' . $_GET['nationvalue'] . '.png'
<img src='http://futhead.cursecdn.com/static/img/16/clubs/<? echo $_GET[nation_id] ?>' >
<select id="nation-id">
<option value="149">Afghanistan</option>
<option value="1">Albania</option>
<option value="97">Algeria</option>
<option value="194">American Samoa</option>
<option value="2">Andorra</option>
<option value="98">Angola</option>
<option value="62">Anguilla</option>
<option value="63">Antigua & Barbuda</option>
<option value="52" selected="yes">Argentina</option>
<option value="3">Armenia</option>
<option value="64">Aruba</option>
<option value="195">Australia</option>
<option value="4">Austria</option>
<option value="5">Azerbaijan</option>
<option value="65">Bahamas</option>
<option value="150">Bahrain</option>
<option value="151">Bangladesh</option>
<option value="66">Barbados</option>
<option value="6">Belarus</option>
<option value="7">Belgium</option>
<option value="67">Belize</option>
<option value="99">Benin</option>
<option value="68">Bermuda</option>
<option value="152">Bhutan</option>
<option value="53">Bolivia</option>
<option value="8">Bosnia Herzegovina</option>
<option value="100">Botswana</option>
<option value="54">Brazil</option>
<option value="69">British Virgin Isles</option>
<option value="153">Brunei Darussalam</option>
<option value="9">Bulgaria</option>
<option value="101">Burkina Faso</option>
<option value="102">Burundi</option>
<option value="154">Cambodia</option>
<option value="103">Cameroon</option>
<option value="70">Canada</option>
<option value="104">Cape Verde Islands</option>
<option value="71">Cayman Islands</option>
<option value="105">Central African Rep.</option>
<option value="106">Chad</option>
<option value="55">Chile</option>
<option value="155">China PR</option>
<option value="56">Colombia</option>
<option value="214">Comoros</option>
<option value="107">Congo</option>
<option value="196">Cook Islands</option>
<option value="72">Costa Rica</option>
<option value="10">Croatia</option>
<option value="73">Cuba</option>
<option value="11">Cyprus</option>
<option value="12">Czech Republic</option>
<option value="13">Denmark</option>
<option value="109">Djibouti</option>
<option value="74">Dominica</option>
<option value="207">Dominican Republic</option>
<option value="110">DR Congo</option>
<option value="57">Ecuador</option>
<option value="111">Egypt</option>
<option value="76">El Salvador</option>
<option value="14">England</option>
<option value="112">Equatorial Guinea</option>
<option value="113">Eritrea</option>
<option value="208">Estonia</option>
<option value="114">Ethiopia</option>
<option value="16">Faroe Islands</option>
<option value="197">Fiji</option>
<option value="17">Finland</option>
<option value="18">France</option>
<option value="19">FYR Macedonia</option>
<option value="115">Gabon</option>
<option value="116">Gambia</option>
<option value="20">Georgia</option>
<option value="21">Germany</option>
<option value="117">Ghana</option>
<option value="205">Gibraltar</option>
<option value="22">Greece</option>
<option value="206">Greenland</option>
<option value="77">Grenada</option>
<option value="157">Guam</option>
<option value="78">Guatemala</option>
<option value="118">Guinea</option>
<option value="119">Guinea Bissau</option>
<option value="79">Guyana</option>
<option value="80">Haiti</option>
<option value="81">Honduras</option>
<option value="158">Hong Kong</option>
<option value="23">Hungary</option>
<option value="24">Iceland</option>
<option value="159">India</option>
<option value="160">Indonesia</option>
<option value="161">Iran</option>
<option value="162">Iraq</option>
<option value="26">Israel</option>
<option value="27">Italy</option>
<option value="108">Ivory Coast</option>
<option value="82">Jamaica</option>
<option value="163">Japan</option>
<option value="164">Jordan</option>
<option value="165">Kazakhstan</option>
<option value="120">Kenya</option>
<option value="166">Korea DPR</option>
<option value="167">Korea Republic</option>
<option value="168">Kuwait</option>
<option value="169">Kyrgyzstan</option>
<option value="170">Laos</option>
<option value="28">Latvia</option>
<option value="171">Lebanon</option>
<option value="121">Lesotho</option>
<option value="122">Liberia</option>
<option value="123">Libya</option>
<option value="29">Liechtenstein</option>
<option value="30">Lithuania</option>
<option value="31">Luxemburg</option>
<option value="172">Macao</option>
<option value="124">Madagascar</option>
<option value="125">Malawi</option>
<option value="173">Malaysia</option>
<option value="174">Maldives</option>
<option value="126">Mali</option>
<option value="32">Malta</option>
<option value="127">Mauritania</option>
<option value="128">Mauritius</option>
<option value="83">Mexico</option>
<option value="33">Moldova</option>
<option value="175">Mongolia</option>
<option value="15">Montenegro</option>
<option value="84">Montserrat</option>
<option value="129">Morocco</option>
<option value="130">Mozambique</option>
<option value="176">Myanmar</option>
<option value="131">Namibia</option>
<option value="177">Nepal</option>
<option value="34">Netherlands</option>
<option value="85">Netherlands Antilles</option>
<option value="215">New Caledonia</option>
<option value="198">New Zealand</option>
<option value="86">Nicaragua</option>
<option value="132">Niger</option>
<option value="133">Nigeria</option>
<option value="35">Northern Ireland</option>
<option value="36">Norway</option>
<option value="178">Oman</option>
<option value="179">Pakistan</option>
<option value="180">Palestinian Authority</option>
<option value="87">Panama</option>
<option value="199">Papua New Guinea</option>
<option value="58">Paraguay</option>
<option value="59">Peru</option>
<option value="181">Philippines</option>
<option value="37">Poland</option>
<option value="38">Portugal</option>
<option value="88">Puerto Rico</option>
<option value="182">Qatar</option>
<option value="25">Republic of Ireland</option>
<option value="39">Romania</option>
<option value="40">Russia</option>
<option value="134">Rwanda</option>
<option value="200">Samoa</option>
<option value="41">San Marino</option>
<option value="135">São Tomé and Príncipe</option>
<option value="183">Saudi Arabia</option>
<option value="42">Scotland</option>
<option value="136">Senegal</option>
<option value="51">Serbia</option>
<option value="137">Seychelles</option>
<option value="138">Sierra Leone</option>
<option value="184">Singapore</option>
<option value="43">Slovakia</option>
<option value="44">Slovenia</option>
<option value="201">Solomon Islands</option>
<option value="139">Somalia</option>
<option value="140">South Africa</option>
<option value="45">Spain</option>
<option value="185">Sri Lanka</option>
<option value="89">St Kitts Nevis</option>
<option value="90">St Lucia</option>
<option value="91">St Vincent Grenadine</option>
<option value="141">Sudan</option>
<option value="92">Suriname</option>
<option value="142">Swaziland</option>
<option value="46">Sweden</option>
<option value="47">Switzerland</option>
<option value="186">Syria</option>
<option value="202">Tahiti</option>
<option value="213">Taiwan</option>
<option value="187">Tajikistan</option>
<option value="143">Tanzania</option>
<option value="188">Thailand</option>
<option value="212">Timor-Leste</option>
<option value="144">Togo</option>
<option value="203">Tonga</option>
<option value="93">Trinidad & Tobago</option>
<option value="145">Tunisia</option>
<option value="48">Turkey</option>
<option value="189">Turkmenistan</option>
<option value="94">Turks & Caicos</option>
<option value="146">Uganda</option>
<option value="49">Ukraine</option>
<option value="190">United Arab Emirates</option>
<option value="95">United States</option>
<option value="60">Uruguay</option>
<option value="96">US Virgin Islands</option>
<option value="191">Uzbekistan</option>
<option value="204">Vanuatu</option>
<option value="61">Venezuela</option>
<option value="192">Vietnam</option>
<option value="50">Wales</option>
<option value="193">Yemen</option>
<option value="147">Zambia</option>
<option value="148">Zimbabwe</option>
</select>
But I want it to update immediately which I tryed with this code:
$(function() {
var update = function() {
$('#photoans').text(
$.map($('#photo').serializeArray(),function(a) {
return a.value;
}).join(", ")
);
};
update();
$('#photo').change(update);
})
Which ofcourse gets you http://futhead.cursecdn.com/static/img/16/clubs/"<div id=photoans>34</div>".png' so that doesn't work. I hope someone can help me. Thanks!

If i understood correctly, I guess this is what you want:
$("#country").change(function(){
var curSelection = $(this).val();
var urlOfImage = "http://ariellarestaurant.com/Scripts/Widgets/Timer/odometer/" + curSelection + ".png";
$("img").attr("src",urlOfImage);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img src="http://ariellarestaurant.com/Scripts/Widgets/Timer/odometer/0.png" />
<br>
<select id="country">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Update : Using Input Field
$("#countryInput").keyup(function(){
var curInput = $(this).val(); // Current Input URL
$("#img2").attr("src",curInput);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="img2" src="http://ariellarestaurant.com/Scripts/Widgets/Timer/odometer/0.png" />
<br>
URL : <input type="text" id="countryInput" />
<p>
To understand copy and paste this url: <b>http://ariellarestaurant.com/Scripts/Widgets/Timer/odometer/1.png</b>
</p>

You need start php and end php tag for echo $_GET content value nation_id
<img src='http://futhead.cursecdn.com/static/img/16/clubs/"<?php echo $_GET['nation_id'] ?>"' >
if you setup php interpritator

GoogleMaps, visualize Country based on a CountryCode

I have a lists of CountryCodes, I would like to generate GoogleMap visualisations based on these CountryCodes. For example for China I have "CN" I would like to be able to generate an visualisation like this:
https://goo.gl/maps/zyPk7
Center and zoom must to be automatic, due to the only information I have is the CountryCode
 Update
I have tried with this code: JSFiddle playground, I can centre and zoom based on CountryName but not based on CountryCode.
geocoder.geocode({"address": address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.bounds);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
When address is a CountryName it works, but I don't know how to make it works when address is a CountryCode.

Geocoding the 2 character ISO 3166 code plus the string "country" works for me:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function codeAddress(selectItem) {
var address = document.getElementById('addr_sel')[selectItem.selectedIndex].value;
geocoder.geocode({
"address": address + " country"
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.bounds);
document.getElementById('address').value = results[0].formatted_address;
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
$("#geocode_button").on("click", codeAddress);
initialize();
#map-canvas {
height: 400px;
margin: 0px;
padding: 0px;
border: 1px solid red;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="panel">
<input id="address" type="textbox" value="Sydney, NSW" />
</div>
<div id="map-canvas"></div>
<select id="addr_sel" onchange="codeAddress(this)">
<!-- ISO 3166 codes from http://simple.wikipedia.org/wiki/ISO_3166-1 -->
<option value="AF">AF</option>
<option value="AX">AX</option>
<option value="AL">AL</option>
<option value="DZ">DZ</option>
<option value="AS">AS</option>
<option value="AD">AD</option>
<option value="AO">AO</option>
<option value="AI">AI</option>
<option value="AQ">AQ</option>
<option value="AG">AG</option>
<option value="AR">AR</option>
<option value="AM">AM</option>
<option value="AW">AW</option>
<option value="AU">AU</option>
<option value="AT">AT</option>
<option value="AZ">AZ</option>
<option value="BS">BS</option>
<option value="BH">BH</option>
<option value="BD">BD</option>
<option value="BB">BB</option>
<option value="BY">BY</option>
<option value="BE">BE</option>
<option value="BZ">BZ</option>
<option value="BJ">BJ</option>
<option value="BM">BM</option>
<option value="BT">BT</option>
<option value="BO">BO</option>
<option value="BA">BA</option>
<option value="BW">BW</option>
<option value="BV">BV</option>
<option value="BR">BR</option>
<option value="IO">IO</option>
<option value="BN">BN</option>
<option value="BG">BG</option>
<option value="BF">BF</option>
<option value="BI">BI</option>
<option value="KH">KH</option>
<option value="CM">CM</option>
<option value="CA">CA</option>
<option value="CV">CV</option>
<option value="KY">KY</option>
<option value="CF">CF</option>
<option value="TD">TD</option>
<option value="CL">CL</option>
<option value="CN">CN</option>
<option value="CX">CX</option>
<option value="CC">CC</option>
<option value="CO">CO</option>
<option value="KM">KM</option>
<option value="CG">CG</option>
<option value="CD">CD</option>
<option value="CK">CK</option>
<option value="CR">CR</option>
<option value="CI">CI</option>
<option value="HR">HR</option>
<option value="CU">CU</option>
<option value="CY">CY</option>
<option value="CZ">CZ</option>
<option value="DK">DK</option>
<option value="DJ">DJ</option>
<option value="DM">DM</option>
<option value="DO">DO</option>
<option value="EC">EC</option>
<option value="EG">EG</option>
<option value="SV">SV</option>
<option value="GQ">GQ</option>
<option value="ER">ER</option>
<option value="EE">EE</option>
<option value="ET">ET</option>
<option value="FK">FK</option>
<option value="FO">FO</option>
<option value="FJ">FJ</option>
<option value="FI">FI</option>
<option value="FR">FR</option>
<option value="GF">GF</option>
<option value="PF">PF</option>
<option value="TF">TF</option>
<option value="GA">GA</option>
<option value="GM">GM</option>
<option value="GE">GE</option>
<option value="DE">DE</option>
<option value="GH">GH</option>
<option value="GI">GI</option>
<option value="GR">GR</option>
<option value="GL">GL</option>
<option value="GD">GD</option>
<option value="GP">GP</option>
<option value="GU">GU</option>
<option value="GT">GT</option>
<option value="GG">GG</option>
<option value="GN">GN</option>
<option value="GW">GW</option>
<option value="GY">GY</option>
<option value="HT">HT</option>
<option value="HM">HM</option>
<option value="VA">VA</option>
<option value="HN">HN</option>
<option value="HK">HK</option>
<option value="HU">HU</option>
<option value="IS">IS</option>
<option value="IN">IN</option>
<option value="ID">ID</option>
<option value="IR">IR</option>
<option value="IQ">IQ</option>
<option value="IE">IE</option>
<option value="IM">IM</option>
<option value="IL">IL</option>
<option value="IT">IT</option>
<option value="JM">JM</option>
<option value="JP">JP</option>
<option value="JE">JE</option>
<option value="JO">JO</option>
<option value="KZ">KZ</option>
<option value="KE">KE</option>
<option value="KI">KI</option>
<option value="KP">KP</option>
<option value="KR">KR</option>
<option value="KW">KW</option>
<option value="KG">KG</option>
<option value="LA">LA</option>
<option value="LV">LV</option>
<option value="LB">LB</option>
<option value="LS">LS</option>
<option value="LR">LR</option>
<option value="LY">LY</option>
<option value="LI">LI</option>
<option value="LT">LT</option>
<option value="LU">LU</option>
<option value="MO">MO</option>
<option value="MK">MK</option>
<option value="MG">MG</option>
<option value="MW">MW</option>
<option value="MY">MY</option>
<option value="MV">MV</option>
<option value="ML">ML</option>
<option value="MT">MT</option>
<option value="MH">MH</option>
<option value="MQ">MQ</option>
<option value="MR">MR</option>
<option value="MU">MU</option>
<option value="YT">YT</option>
<option value="MX">MX</option>
<option value="FM">FM</option>
<option value="MD">MD</option>
<option value="MC">MC</option>
<option value="MN">MN</option>
<option value="ME">ME</option>
<option value="MS">MS</option>
<option value="MA">MA</option>
<option value="MZ">MZ</option>
<option value="MM">MM</option>
<option value="NA">NA</option>
<option value="NR">NR</option>
<option value="NP">NP</option>
<option value="NL">NL</option>
<option value="AN">AN</option>
<option value="NC">NC</option>
<option value="NZ">NZ</option>
<option value="NI">NI</option>
<option value="NE">NE</option>
<option value="NG">NG</option>
<option value="NU">NU</option>
<option value="NF">NF</option>
<option value="MP">MP</option>
<option value="NO">NO</option>
<option value="OM">OM</option>
<option value="PK">PK</option>
<option value="PW">PW</option>
<option value="PS">PS</option>
<option value="PA">PA</option>
<option value="PG">PG</option>
<option value="PY">PY</option>
<option value="PE">PE</option>
<option value="PH">PH</option>
<option value="PN">PN</option>
<option value="PL">PL</option>
<option value="PT">PT</option>
<option value="PR">PR</option>
<option value="QA">QA</option>
<option value="RE">RE</option>
<option value="RO">RO</option>
<option value="RU">RU</option>
<option value="RW">RW</option>
<option value="SH">SH</option>
<option value="KN">KN</option>
<option value="LC">LC</option>
<option value="PM">PM</option>
<option value="VC">VC</option>
<option value="WS">WS</option>
<option value="SM">SM</option>
<option value="ST">ST</option>
<option value="SA">SA</option>
<option value="SN">SN</option>
<option value="RS">RS</option>
<option value="SC">SC</option>
<option value="SL">SL</option>
<option value="SG">SG</option>
<option value="SK">SK</option>
<option value="SI">SI</option>
<option value="SB">SB</option>
<option value="SO">SO</option>
<option value="ZA">ZA</option>
<option value="GS">GS</option>
<option value="ES">ES</option>
<option value="LK">LK</option>
<option value="SD">SD</option>
<option value="SR">SR</option>
<option value="SJ">SJ</option>
<option value="SZ">SZ</option>
<option value="SE">SE</option>
<option value="CH">CH</option>
<option value="SY">SY</option>
<option value="TW">TW</option>
<option value="TJ">TJ</option>
<option value="TZ">TZ</option>
<option value="TH">TH</option>
<option value="TL">TL</option>
<option value="TG">TG</option>
<option value="TK">TK</option>
<option value="TO">TO</option>
<option value="TT">TT</option>
<option value="TN">TN</option>
<option value="TR">TR</option>
<option value="TM">TM</option>
<option value="TC">TC</option>
<option value="TV">TV</option>
<option value="UG">UG</option>
<option value="UA">UA</option>
<option value="AE">AE</option>
<option value="GB">GB</option>
<option value="US">US</option>
<option value="UM">UM</option>
<option value="UY">UY</option>
<option value="UZ">UZ</option>
<option value="VU">VU</option>
<option value="VE">VE</option>
<option value="VN">VN</option>
<option value="VG">VG</option>
<option value="VI">VI</option>
<option value="WF">WF</option>
<option value="EH">EH</option>
<option value="YE">YE</option>
<option value="ZM">ZM</option>
<option value="ZW">ZW</option>
</select>

Develop Reference

JavaScript is the programming language of the Web.

React: Generate all date of birth select options - javascript

Related

i need help i have problem with sub option problem how to fix?

How to Link to a Selected Drop-Down Item to Open a Web Page

How do I grab the option text from a value

Get option value in form, then use it in a url

GoogleMaps, visualize Country based on a CountryCode

Categories

Resources