I want when someone selects a country out of my list the province in that country show up in the second select bar is this possible within html? And if not how do I do it with javascript.
<!DOCTYPE html>
<html>
<head>
<title>Gegevens</title>
</head>
<body>
<center>
<h1>Gegevens</h1>
</center>
Land:
<select id="countries">
<option value="Holland">Holland</option>
<option value="Denmark">Denmark</option>
<option value="England">England</option>
<option value="Spain">Spain</option>
<option value="Italy">Italy</option>
</select><br>
Provincie:
<select> OPTIONS FOR HOLLAND
<option value="Gelderland">Gelderland</option>
<option value="Utrecht">Utrecht</option>
</select>
<select> OPTIONS FOR ENGLAND ETC...
<option value="Schotland">Schotland</option>
<option value="Wales">Wales</option>
</select>
<footer>Ga terug</footer>
</body>
</html>
You'll probably have to do this using JavaScript. I've edited your HTML a bit to make the selection process easier. There might be a way with HTML form elements, but try this:
var countrySelect = document.getElementById('countries'); //the main select
var countryClass = document.getElementsByClassName('country'); //the other selects
countrySelect.onchange = function(){
var selected = this.children[this.selectedIndex].value; //this is the value of the country select;
for(var i = 0; i < countryClass.length; i++)
countryClass[i].style.display = countryClass[i].id === selected ? 'block' : 'none';
}
<body>
<center>
<h1>Gegevens</h1>
</center>
Land:
<select id="countries">
<option disabled selected>Select Country</option>
<option value="Holland">Holland</option>
<option value="Denmark">Denmark</option>
<option value="England">England</option>
<option value="Spain">Spain</option>
<option value="Italy">Italy</option>
</select><br>
Provincie:
<select class="country" id="Holland" style="display:none;">
<option disabled selected>Select Location</option>
<option value="Gelderland">Gelderland</option>
<option value="Utrecht">Utrecht</option>
</select>
<select class="country" id="England" style="display:none;">
<option disabled selected>Select Location</option>
<option value="Schotland">Schotland</option>
<option value="Wales">Wales</option>
</select>
</body>
I am not sure about the html way but the jquery way is pretty easy.
Handle option selected of countries. Based on the country selected hide/show provinces:
$(document).ready(function(){
$('#countries').on('change',function(){
var selectedCountry = $(this).find('option:selected').text();
switch (selectedCountry){
case 'Holland':
// hide show provice
break;
//etc
}
});
});
You need to use JS and play with elements display property.
After user selects a country hide province select (code snippet below hides all selects sharing toggle class), then identify which country was selected and show the province select for that country. Voilà!
<!DOCTYPE html>
<html>
<head>
<title>Gegevens</title>
</head>
<body>
<center>
<h1>Gegevens</h1>
</center>
Land:
<select id="countrySelect" onchange="toggleCountry()">
<option value="Holland">Holland</option>
<option value="England">England</option>
</select><br>
Provincie:
<select id="provinceHolland" class="toggle">
<option value="Gelderland">Gelderland</option>
<option value="Utrecht">Utrecht</option>
</select>
<select id="provinceEngland" class="toggle" style="display:none">
<option value="Schotland">Schotland</option>
<option value="Wales">Wales</option>
</select>
<footer>Ga terug</footer>
<script>
function toggleCountry() {
var list = document.getElementsByClassName("toggle");
for (var i = 0; i < list.length; i++) {
list[i].style.display = "none";
}
var sub = "province" + document.getElementById("countrySelect").value;
document.getElementById(sub).style.display = "inline";
}
</script>
</body>
Related
Currently I have the code to select the city of the user from the drop down options.
But if the user is clicking from the cities that are not in the drop down options, it selects the first option in the drop down.
Is there anyway to make it select the nearest option in the drop down list?
Here is the Jsfiddle: http://jsfiddle.net/uZLNM/104/
<title></title>
<body>
<div id="container">
<select name="country" id="country" class="inputCombo">
<option value="Sioux Falls">Sioux Falls</option>
<option value="Green Bay">Green Bay</option>
<option value="Brooklyn">Brooklyn</option>
<option value="GB">United Kingdom</option>
<option value="Lincoln">Lincoln</option>
<option value="US">United States</option>
</select>
</div>
</body>
Script:
var url = 'http://www.geoplugin.net/json.gp?jsoncallback=?';
$(document).ready(function() {
$.getJSON(url).success(function(data) {
var country_code = data.geoplugin_city;
var $country = $('#country');
$country.find('option[value="' + country_code + '"]').prependTo($country);
$country.val(country_code);
});
});
I am trying to get (or show) values from Multiple Select using only Javascritpt. Let's say, the user can select multiple options from here, and when they click the 'Show Select' button they can see what are the values of these options.
I took the idea about 'selected' attribute from here
But, the code didn't work. Any help?
<select id ="selectOptions" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onclick="myFunction()">Show Selects</button>
<script>
function myFunction()
{
var numOfOptions = document.getElementById("slectOptions").options.length;
var n=0;
for (n=0; n<numOfOptions; n++)
{
// I tried to use a for loop that will go around from option 0 to 3,
//and through 'selected' attribute wanted to check the condition if the option is selected then only show the values
// I still couldn't figure out if the loop is working at all
if (document.getElementById("slectOptions")[n].selected)
{
var x = document.getElementById("slectOptions").value;
window.alert(x);}
}
}
Just use
var select = document.getElementById("selectOptions");
console.log(select.selectedOptions);
Iterate over the options and check checked property. Although there is a simple type in your selector where missing e in the string.
function myFunction() {
var options = document.getElementById("selectOptions").options;
for (var n = 0; n < options.length; n++) {
if (options[n].selected) {
console.log(options[n].value);
}
}
}
<select id="selectOptions" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onclick="myFunction()">Show Selects</button>
Or use readonly selectedOptions property to get the collection of selected options.
function myFunction() {
var options = document.getElementById("selectOptions").selectedOptions;
for (var n = 0; n < options.length; n++) {
console.log(options[n].value);
}
}
<select id="selectOptions" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onclick="myFunction()">Show Selects</button>
<!DOCTYPE html>
<html>
<script>
function eraseText() {document.getElementById("txtChoices").value = "";
}
function SetMulti() {var txtChoices = document.getElementById("txtChoices"); txtChoices.value += document.getElementById("choiceNames").value;
}
</script>
</head>
<body>
<input type="text" id="txtChoices" readonly="readonly" placeholder="Multiple choice"/></br>
"Variable" Choice dropdown:
</br>
<select multiple="" name="choiceNames" id="choiceNames">
<option value="Long, ">Long, </option>
<option value="Short, ">Short, </option>
<option value="Red, ">Red, </option>
<option value="Curly, ">Curly, </option>
<option value="Straight, ">Straight, </option>
</select>
<button onclick="SetMulti()">Add</button>
<button onclick="eraseText()">Reset</button>
</body>
</html>
I have this issue: In my form there are 4 dropdownlist and when the 1st (category1) or 2nd (software1) dropdown list is selected, the 3th (category2) and 4th (software2) must be disabled.
For this issue I find this script at disable-second-dropdown-if-the-first-is-not-selected but I do not trust to modify this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<script type="text/javascript">
var setEnabled = function(e) {
var name = this.name.replace(/1/, '2'); //get name for second drop down
$('select[name=' + name + ']')
.prop('disabled', 0 === this.selectedIndex) // disable if selected option is first one
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
</script>
How to modify this?
Thanks
I think the main thing you want is to flip === for !==
However, to get this working on a matrix, where both top inputs trigger enabling/disabling of both bottom inputs, you'll need to test both on change of either.
var setEnabled = function(e) {
var selected = $('select[name=cat1]').prop('selectedIndex') > 0 || $('select[name=soft1]').prop('selectedIndex') > 0;
$('select[name=cat2], select[name=soft2]').prop('disabled', selected); // disable if selected option is first one
if (selected) {
$('select[name=cat2], select[name=soft2]').prop('selectedIndex', 0)
}
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
How can I amend the code so that when I select a option from the first drop down menu the second drop down menu becomes editable otherwise the second drop-down menu should be read only, and if the option in the first drop down menu is "default" then the second drop down menu should be read only.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function mySecondFunction() {
document.getElementById("mySelection").disabled = false;
}
</script>
</head>
<body>
<form action="">
<select name="cars" onload="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
</html>
Look at the capitals:
document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">
The first is with "M" and the seccond with "m"
You have misspelled MySelection with mySelection
In the JS you have document.getElementById("MySelection") // notice the uppercase M
and in the HTML you have id="mySelection"
Also set the second select to false when the window loads and add a onChange event to the first select that will set the second event to enabled/true... it this what you want?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("mySelection").disabled = true;
};
function mySecondFunction() {
document.getElementById("mySelection").disabled = false;
}
</script>
</head>
<body>
<form action="">
<select name="cars" onchange="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
</html>
You may want to set the second select back to disabled if the user selects 'default' in the first menu after changing the value
JavaScript selectors are case sensitive. Your mistake is at mySelection id:
document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">
You must use that inside body tag .
fiddle
<head>
</head>
<body onload="mySecondFunction()">
<form action="">
<select name="cars" >
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
<script type="text/javascript">
function mySecondFunction() {
alert("aaa");
document.getElementById("mySelection").disabled = false;
}
</script>
</html>
As others pointed out you mispelled the id of the second <select> but also you used the wrong event, onchange is what you want instead of onload.
function mySecondFunction() {
document.getElementById('mySelection').disabled = false;
}
<form action="">
<select name="cars" onchange="mySecondFunction();">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br />
<select disabled="disabled" name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
But consider using jQuery and attach your events in javascript instead of having them stored in html.
Try this:
Replace
document.getElementById("mySelection").disabled = false;
with this
document.getElementById("mySelection").removeAttribute('disabled');
Also, you may want to change
onload="mySecondFunction()"
with this:
onchange="mySecondFunction()"
Hope this helps.
Change onload to onchange.
<select name="cars" onchange="mySecondFunction();">
if you want to remove the disable in a specific value like (Saab)
See fiddle
note: put the script in b4 the head tag
function mySecondFunction()
{
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "saab")
{
document.getElementById("mySelection").disabled = false;
}else {
document.getElementById("mySelection").disabled = true;
}
}
<form action="">
<select id="1" name="cars" onchange="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br />
<select disabled="disabled" name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
UPDATE
See fiddle
function mySecondFunction()
{
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "default")
{
document.getElementById("mySelection").disabled = true;
}else {
document.getElementById("mySelection").disabled = false;
}
}
I need your help,
I am unsure as to how to go about the following:
If I select the color green into the first select box, I would need the selected option to be automatically selected into the 2nd select box.
How do you accomplish this using just javascript alone.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span>Category:</span>
<br>
<select id="select1">
<option value=""></option>
<option value="RED">RED</option>
<option value="BLUE">BLUE</option>
<option value="GREEN">GREEN</option>
<option value="YELLOW">YELLOW</option>
</select>
<br>
<span>Your selection was:</span>
<br>
<select id="select2">
<option value=""></option>
<option value="RED">RED</option>
<option value="BLUE">BLUE/option>
<option value="GREEN">GREEN</option>
<option value="YELLOW">YELLOW</option>
</select><b></b>
</body>
</html>
You can iterate through the options until you find the same value:
document.getElementById("select1").onchange = function() {
var selected = this.value;
var select2 = document.getElementById("select2");
//find the index in the second select
for (var i = 0; i < select2.options.length; i++) {
if (select2.options[i].value == selected) {
select2.options[i].selected = true;
}
}
}
Demo: http://jsfiddle.net/HJm7E/
If two select tags have same options:
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
select1.addEventListener('change', function(){
select2.selectedIndex = this.selectedIndex;
});
Fiddle
Note that this simple solution will be wrong for selects that have different options. In this case this will work:
select1.addEventListener('change', function(){
for(var i = 0; i < select2.options.length; i++){
if(select2.options[i].value === this.options[this.selectedIndex].value)
select2.options[i].selected = true;
}
});
Updated fiddle
<!DOCTYPE html>
<html>
<head>
<script>
function doOnload() {
var slt1 = document.getElementById("select1");
var slt2 = document.getElementById("select2");
slt1.onchange = function() {
slt2.options[slt1.selectedIndex].selected = true;
};
}
</script>
</head>
<body onload="doOnload()">
<span>Category:</span>
<br>
<select id="select1">
<option value=""></option>
<option value="RED">RED</option>
<option value="BLUE">GREEN</option>
<option value="GREEN">GREEN</option>
<option value="YELLOW">YELLOW</option>
</select>
<br>
<span>Your selection was:</span>
<br>
<select id="select2">
<option value=""></option>
<option value="RED">RED</option>
<option value="BLUE">GREEN</option>
<option value="GREEN">GREEN</option>
<option value="YELLOW">YELLOW</option>
</select><b></b>
</body>