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);
});
});
Related
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>
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>
I´m not expert with javascript & jquery, and I just googled for many days but can´t find the answer.
How can I populate a select with options selected from other selects. For this example from the 1st select I choose Manchester, from 2nd I choose Bogota and the 3rd must be populated with Manchester and Bogota:
Select One <br>
<select id="city" name="city">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select><br>
Select 2 <br>
<select id="city2" name="city2">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select><br>
Select 3, populated whit the options of the previous 2 selects <br>
<select id="street" name="street">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="4">Bogota</option>
</select>
Many thanks for help me.
The following jQuery will refresh the street select list any time a change is made to a select with class refresh on it.
function refreshList() {
$('#street option').remove(); //Clear the dropdown
$('#street').append('<option value="0"></option>'); //Add the blank option
$('.refresh').each(function() { //Loop through every instance of class 'refresh'
var v = $(this).val(); //Selected Value
var t = $(this).find('option[value="' + v + '"]').text(); //Selected Text
if (v != 0) { //If value isn't blank, add option to Street
$("#street").append('<option value="' + v + '">' + t + '</option>');
}
});
}
$(document).ready(function() { //When the page loads
$('.refresh').change(function() { //Initialize a click-event listener for class 'refresh'
refreshList(); //Run above function
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select One <br>
<select id="city" name="city" class="refresh">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select><br>
Select 2 <br>
<select id="city2" name="city2" class="refresh">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select><br>
Select 3, populated with the options of the previous 2 selects <br>
<select id="street" name="street">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="4">Bogota</option>
</select>
$('select#city').change(function() {
var $selected = $('option:selected', this).clone()//make a copy of selected option
$('#street').append($selected)//put the selected option in the 3rd select
})
$('select#city2').change(function() {
var $selected = $('option:selected', this).clone();//make a copy of selected option
$('#street').append($selected)//put the selected option in the 3rd select
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select One
<br>
<select id="city" name="city">
<option value="0"></option>
<option value="1">Manchester</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
</select>
<br>Select 2
<br>
<select id="city2" name="city2">
<option value="0"></option>
<option value="4">Bogota</option>
<option value="5">Buenos Aires</option>
<option value="6">Quito</option>
</select>
<br>Select 3, populated whit the options of the previous 2 selects
<br>
<select id="street" name="street">
<option value="0"></option>
</select>
Use .clone() to make a copy of selected option
Description: Create a deep copy of the set of matched elements.
Then use .append() to insert the cloned element to 3rd select
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.
I have the following two select drop-downs, this one for Office location:
<label class="label_select" for="office">Office<span class="required"><font color="red">*</font></span>
</label>
<select class="select" name="office" onchange="divisionSelectHandler(this)" required>
<option selected disabled style="display:none;" value="">Select Office</option>
<optgroup label ="Arizona">
<option value="Glendale">Glendale</option>
<option value="Mesa">Mesa</option>
<option value="AZRemote">Remote</option>
<option value="Tucson">Tucson</option>
<option value="Yuma">Yuma</option>
</optgroup>
<optgroup label="Oregon">
<option value="ORRemote">Remote</option>
<option value="Salem">Salem</option>
</optgroup>
<optgroup label="Utah">
<option value="Orem">Orem</option>
<option value="UTRemote">Remote</option>
<option value="Taylorsville">Taylorsville</option>
<optgroup>
</select>
and this one for Division:
<label class="label_select" for="division">Division<span class="required"><font color="red">*</font></span>
</label>
<select class="select" name="division" id="divisionstd" required>
<option selected disabled style="display:none;" value="">Select Division</option>
<option value="EarlyIntervention">Early Intervention</option>
<option value="Employment_Services">Employment Services</option>
<option value="Family_Services">Family Services</option>
<optgroup label="OMG-Accounting">OMG-Accounting>
<option value="AccountingAP">AP</option>
<option value="AccountingAR">AR</option>
<option value="AccountingGL">GL</option>
</optgroup>
<option value="HR">OMG-HR</option>
<option value="Residential_Services">Residential</option>
</select>
What I am trying to do is hide certain Divisions based on the Office that is selected. For example, if a user selects "Glendale" from the office drop-down, I would like to hide the OMG-Accounting options from the Divisions drop-down. I am just learning JS and have something that hides the whole Divisions drop-down, but how can I hide individual options? JS:
<script>
function hide(){
var division = document.getElementById('divisionstd');
division.style.visibility = 'hidden';
}
function show(){
var division = document.getElementById('divisionstd');
division.style.visibility = 'visible';
}
function divisionSelectHandler(select){
if(select.value == 'Mesa'){
hide();
}}
</script>
Add id or name or class attribute to your optgroup
<optgroup label="OMG-Accounting" name="test54" id="test54">OMG-Accounting>
<option value="AccountingAP">AP</option>
<option value="AccountingAR">AR</option>
<option value="AccountingGL">GL</option>
</optgroup>
JS :
function divisionSelectHandler(select){
if(select.value == 'Glendale'){
var ele = document.getElementById('test54')
ele.style.display = 'none'
}
}
OR
change html like this one.Assign unique lable to each optgroup
e.g. omgaccounting
<optgroup label="omgaccounting">OMG-Accounting>
<option value="AccountingAP">AP</option>
<option value="AccountingAR">AR</option>
<option value="AccountingGL">GL</option>
</optgroup>
JS :
var arrEle = document.querySelectorAll('optgroup[label="omgaccounting"]');;
arrEle[0].style.display = 'none'
You can hide multiple optgroup in this way using class,label or name
$("select[name=office]").on("change", function() {
var getValue = $(this).val();
var targetGroup = $("select[name=division] optgroup[label='OMG-Accounting']");
(getValue=="Glendale") ? targetGroup.hide() : targetGroup.show();
});
working fiddle : https://jsfiddle.net/8et5raex/
$("select[name=division] optgroup[label='OMG-Accounting']");
targets optgroup with label='OMG-Accounting' under selection box with name division
For example, if a user selects "Glendale" from the office drop-down, I would like to hide the OMG-Accounting options from the Divisions drop-down
Try this in your existing code,
function divisionSelectHandler(select){
if(select.value == 'Glendale'){
$('divisionstd optgroup[label="OMG-Accounting"]').hide();
}
}
Select specific option group and hide it, Right now you are hiding entire select element.
Other options
1) Hide by option VALUE
$('divisionstd option[value="Family_Services"]').hide();
2) Hide by option TEXT
$('divisionstd option[text="OMG-HR"]').hide();
3) Hide OptionGroup by label
$('divisionstd optgroup[label="OMG-Accounting"]').hide();
I have question where you need to find pairs of words in Russian and English
<div class="form-group" id="question4">
<label for="q4FirstSelectEN">4</label>
<div class="row">
<div class="col-lg-offset-2 col-lg-2 q4EN">
<select name="firstSelectEn" id="q4FirstSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4SecondSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4ThirdSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
</div>
<div class="col-lg-2 q4RU">
<select name="firstSelectRu" id="q4FirstSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4SecondSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4ThirdSelectRU">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
</div>
</div>
</div>
When user selects for example 'red' in (select) inside (div class='q4EN') in all remaining selects in this (div class=q4EN) selected 'red' option become nonSelectable
(nonSelectable is class in css with display:none)
When user change decision and select 'green' instead of 'red' in first (select) red became available in rest selects and green become nonSelectable
When all 3 select have their value user can't change anything
My js for this is not working and I out of ideas
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select")
.not(this)
.find("option:selected")
.addClass("nonSelectable");
});
I believe the problem is order of operations.
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select") //Finds all select lists
.not(this) //Finds all except the one just changed
.find("option:selected") //Finds selected of all except the one just changed
.addClass("nonSelectable"); //Wont do anything because nothing was selected
});
Try the following:
$(".q4EN").find("select").change(function() {UpdateOptions();});
function UpdateOptions(){
var ss = $(".q4EN").find("select");
ss.find('option').prop("disabled", false); //Enable all before disabling selected
ss.each(function () {
var s = $(this).val();
if(s != undefined && s != "") {
ss.find("option[value=" + s + "]").prop("disabled", true);
}
});
}
This is an alternate way to achieve what you need. It basically iterate through every select element and find the corresponding option and disables it.
$('select').find("option").addClass("selectable");
$('select').on("change",function()
{
// $(this).find("option").prop("disabled",false); // uncomment this if you wish to reset the disabled selection
var $thisId = this.id;
var $selectedOption = $(this).find("option:selected").val();
$('select').each(function()
{
if(this.id !== $thisId)
{
// $(this).find("option").removeClass("non-selectable").addClass("selectable"); // uncomment this if you wish to reset the disabled selection
$(this).find("option[value=" + $selectedOption + "]").prop("disabled",true).addClass("non-selectable").removeClass("selectable");
}
});
})
https://fiddle.jshell.net/a2n234eq/4/
To target a specific group ( like EN and RU ) , change $('select') to $('.q4EN select')