set dropdown option value based another dropdown onchange function - javascript

i want to make multiple dropdown option value to be the same as dropdown value with id=monday on change function.
monday
<select id="monday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
tuesday
<select id="tuesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
wednesday
<select id="wednesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
JS
$("#monday").change(function() {
$("#tuesday").value = $("#monday").value;
$("#wednesday").value = $("#monday").value;
});
i saw the example with assign dropdown name with array like name="dropdown[]", but i want to keep the id like i wrote. Thanks in advance


Here is how to sync any other to monday
$(function() {
$("#monday").on("change", function() { // or .sel for all
$(".sel").not(this).val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
monday
<select class="sel" id="monday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
<br>
<br>tuesday
<select class="sel" id="tuesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
<br>
<br>wednesday
<select class="sel" id="wednesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>


Nothing would happen when you have updated value property, which only works with DOM element. So use val() method for jQuery object, although you can combine selectors into one by separating them using a comma.
$("#monday").change(function() {
$("#tuesday,#wednesday").val(this.value);
});
$("#monday").change(function() {
$("#tuesday,#wednesday").val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
monday
<select id="monday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
tuesday
<select id="tuesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
wednesday
<select id="wednesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>

Related

Disable the second selection options that are smaller than the first selection option

If I select for example: "5" from first selector, i want to disable first five options from second selector. Select days from 5 to minim 6.
<select class="form-control" name="days[]">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
<select>
<select class="form-control" name="days[]">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
<select>

You can do it using prevAll() and addBack() methods with a change event handler.
// get dropdowns
const $drop = $('[name="days[]"]');
// attach change event handler
$drop.eq(0).change(function() {
// enable all the options
$drop.eq(1).find('option').prop('disabled', false);
// get the corresponding option and all its previous options and then disable them
$drop.eq(1).find(`option[value="${this.value}"]`).prevAll().addBack().prop('disabled', true);
}).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="days[]">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
</select>
<select class="form-control" name="days[]">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
</select>

How to make an if statement to disable select option?

I have three select menus where the user selects a subject, year and season. However, I want it so that if the user selects the year '2019', the 'Fall' option will get disabled.
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>

Create and event handler for the Year's change event and disable the season based on what Year's new value is.
https://jsfiddle.net/075fnm4a/
HTML
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
Jquery
$(document).ready(function(){
$('select[name="Year"]').on('change',function(){
var $this = $(this);
$('select[name="Season"]').find('option[value="Fall"]').prop('disabled', ($this.val() == '2019') ); // disabled or enabled
});
$('select[name="Year"]').trigger('change');
});

Like this.
document.querySelector('#year').onchange = ev => {
const value = ev.target.value;
if (value === '2019') {
document.querySelector('#fall').disabled = true;
} else {
document.querySelector('#fall').disabled = false;
}
}
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall" id="fall" disabled>Fall</option>
</select>

<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="years">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season" id="seasons">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
$('#years').on('change', function(){
if($(this).val()==='2019'){
$("#seasons option").each(function()
{
if($(this).val() === 'Fall'){
$(this).attr('disabled', 'disabled');
}
});
}
});

You can onchange event and bind callback to it that get season select element and enable and disable Fall season according to selection value
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" onchange="changeYear(this.value)">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring" >Spring</option>
<option value="Fall" disabled>Fall</option>
</select>
<script>
function changeYear(value)
{
var seasons = document.getElementsByName("Season")[0].options;
var fallSeason = Array.apply(null, seasons).find(season => season.value === 'Fall');
fallSeason.disabled = (value==='2019')
}
</script>

Link State List Drop Down HTML to a specific page

I have added a drop down state list to my home page, which uses wordpress/elemntor.
When an item is selected from the dropdown list I would like to redirect the user to another URL. For example, when Georgia is selected I would like to redirect to this URL: https://www.everlastingopportunities.com/georgia/
How do I make the page go to the above URL when Georgia selected in drop down?
<select>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<!-- ... list continues ... -->
</select>

You can achieve it by passing the selected option to the javascript function and using it to redirect to the new url.
Ideal is to add a blank option on top, so that the person who wants Alabama as option makes a choice once.
I have made the script based on visible name as you showed in the question.
function my_function(event) {
var options = event.target.options;
var selected = options[options.selectedIndex].text;
window.location.href = 'https://www.everlastingopportunities.com/' + selected + '/';
}
<select onchange="my_function(event)">
<option value="">---</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<!-- ... list continues ... -->
</select>

You can easy do it with jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectCountry">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<!-- ... list continues ... -->
</select>
<script type="text/javascript">
$( document ).ready(function() {
$("#selectCountry").change(function(){
window.location.href = "https://www.everlastingopportunities.com/" + $("#selectCountry > option:selected").text() + "/";
});
});
</script>

Copy and past Code from post above for the full code and enter website links.
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="everlastingopportunities.com/Alabama/">Alabama (AL)</option>
<option value="(ENTER WEBSITE LINK HERE)">Alaska (AK)</option>
<option value="(ENTERWEBSITE LINK HERE)">Arizona (AZ)</option>

<div class="col-md-4">
<label f`enter code here`or="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>
<!-- option -->
<option value="---">---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">District of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>`enter code here`
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Marianas Islands">Northern Marianas Islands</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<!-- option -->
</option>
</select>
</div>

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

Categories

Resources