I have this code that selects the country in a dropdown (that only contains 7 countries) through visitor IP, problem is that when a country is not found as an option the dropdown ignores any default selected values and just shows a blank space. I want to have a default selected value (in this case Belize) after the script is run.
Here is the script:
$.get("http://ipinfo.io", function (response) {
$('.country').val(response.country).attr('selected',true);
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="country">
<option value="BZ" selected>Belize</option>
<option value="GT">Guatemala</option>
<option value="HN">Honduras</option>
<option value="SV">El Salvador</option>
<option value="NI">Nicaragua</option>
<option value="CR">Costa Rica</option>
<option value="PA">Panama</option>
</select>
Thanks.
You can add a condition to check if the country is present in the select options
$.get("http://ipinfo.io", function (response) {
if($(".country option[value='"+response.country+"']").length > 0){
$('.country').val(response.country).attr('selected',true);
}
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="country">
<option value="BZ" selected>Belize</option>
<option value="GT">Guatemala</option>
<option value="HN">Honduras</option>
<option value="SV">El Salvador</option>
<option value="NI">Nicaragua</option>
<option value="CR">Costa Rica</option>
<option value="PA">Panama</option>
</select>
Related
I have following simple Html code with SELECT with the same class forms with identical options values
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
I just want to do click on a dropdown dynamic show and hide value from ALL SELECT with one class.
jQuery.each($("select.gr-fields-select"), function(){
$(".gr-fields-select").change(function() {
if($(".gr-fields-select").val() != "") {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
$(".gr-fields-select option[value="+$(".gr-fields-select").val()+"]").hide();
} else {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
}
});
})
Please check the jdfiddle here:
https://jsfiddle.net/mhassan94/d6j3fpt2/3/
If a select one dropdown value, they hide from All dropdown but if a change select dropdown value they show previous value and hide the new value in All dropdown.
How is that better to achieve?
Is this what you want to do?
$(".gr-fields-select").change(function(){
var selectedValue = $(this).val();
$(".gr-fields-select").each(function(ind, item){
if($(item).find(':selected').value!=selectedValue){
$(item).find('option').each(function(index,option){
if(option.value!=selectedValue){
$(option).show();
}else{
$(option).hide();
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>First</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<br>
<label>Second</label><select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<br>
If you need to hide the value selected in one particular select element,from all the values populated in rest of the select elements try this,
$(".gr-fields-select").change(function(){
var selectedValue = $(this).val();
var previousValue = $(this).data("new");
if(previousValue!=undefined){
$(this).data("old",previousValue);
}
$(this).data("new",selectedValue);
$(".gr-fields-select").each(function(ind, item){
if($(item).find(':selected').value!=selectedValue){
$(item).find('option').each(function(index,option){
if(option.value==selectedValue){
$(option).hide();
}
if(option.value==previousValue){
$(option).show();
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
So in the don't re-invent the wheel category. I'm thinking a multi select such as select2 might accomplish what you want alot easier than the multiple drop downs. select 2 even lets you limit your selection length if you only want two. I think with multiple drop downs there is alot to track. especially if you want more than two drop downs. What if they choose the selects out of order? run the snippet below to see a possible implementation using a multiselect
$(document).ready(
function () {
$("#multipleSelectExample").select2({
maximumSelectionLength: 2,
closeOnSelect: false,
allowClear: true
});
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css">
<select id="multipleSelectExample" data-placeholder="Select" multiple>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>
When I change the option, the page doesn't change.
I want to change the page to '(value).html'.
function countryHandler() {
var x = document.getElementsByID("country").value;
window.location.href = "";
}
<select id="country" onclick="countryHandler();">
<option value="">Country...</option>
<option value="KR">Korea</option>
<option value="US">United States of America</option>
</select>
<select id="country" onchange="countryHandler(this.value)">
<option value="">Country...</option>
<option value="KR">Korea</option>
<option value="US">United States of America</option>
</select>
<script>
function countryHandler(value) {
window.location.assign(`${value}.html`);
}
</script>
You have to listen on change in select section.
Use
window.location('http://example.com');
or
window.location.assign('http://example.com');
The onchange attribute fires the moment when the value of the element is changed.
function urlHandler(value) {
window.location.assign(`${value}`);
}
<select id="url" onchange="urlHandler(this.value)">
<option disabled selected value>Select Option</option>
<option value="https://techne.africa">TechNe Africa</option>
<option value="https://google.com">Google</option>
<option value="https://facebook.com">Facebook</option>
<option value="https://twitter.com">Twitter</option>
<option value="https://instagram.com">Instagram</option>
<option value="https://youtube.com">YouTube</option>
<option value="https://linkedin.com">LinkedIn</option>
</select>
I have something like :
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>
I am trying to do, if Scrammer is selected in #BadReason select 1 week in #BanLength automaticly.
try using change event BanReason and based on this value pass the desired value to BanLength and trigger the change.:
$("#BanReason").on("change",function(){
if(this.value == "scrammer"){
$("#BanLength").val("1week").trigger("change");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>
On change event will help you to do this
$("#BanReason").on("change",function(){
if($(this).val() == "scrammer")
$("#BanLength").val("1week");
});
Added a Fiddle to this
Fiddle
I have 2 select boxes one is called Countries and other Called States
here is sample of Countries Select Box
<select name="Country" id=Country">
<option value="">Select Country</option>
<option value="AS">American Samoa</option>
<option value="AQ">Antarctica</option>
<option value="CA">Canada</option>
<option value="UK">United Kingdon</option>
<option value="US">United States</option>
</select>
I am running small javascript based on jQuery that if the country selected is CA and then in the States Select Box just display all the options of Canadian Provinces, other wise for any other country just display the default US States
here is the sample States Select Box
<select name="StateSelect" id="StateSelect">
<option value="">Select State</option>
<option class="us-states" value="AA">Armed Forces - Americas</option>
<option class="us-states" value="AE">Armed Forces - Europe</option>
<option class="us-states" value="AP">Armed Forces - Pacific</option>
<option class="us-states" value="AL">Alabama</option>
<option class="us-states" value="AK">Alaska</option>
<option class="us-states" value="AZ">Arizona</option>
<option class="ca-states" value="AB">Alberta</option>
<option class="ca-states" value="BC">British Columbia</option>
<option class="ca-states" value="MB">Manitoba</option>
<option class="ca-states" value="NB">New Brunswick</option>
<option class="ca-states" value="NF">Newfoundland</option>
</select>
here is my script
<script type="text/javascript">
$(document).ready(function() { $("#Country").change(function () {
if($("#Country").val()=='CA'){
$(".us-states").css("display", "none");
$(".ca-states").css("display", "block");
} else {
$(".us-states").css("display", "block");
$(".ca-states").css("display", "none");
}
});
</script>
The problem is the script works fine in FireFox but any other browser like Chrome or IE it does not work at all, when I select the country as CA it just does not display the Canadian Provinces.
What am I missing? thanks and appreciate any advice :)
Try it like this:
<script type="text/javascript">
$(document).ready(function() {
$("#Country").change(function () {
if($("#Country").val()=='CA'){
$(".us-states").hide();
$(".ca-states").show();
} else {
$(".us-states").show();
$(".ca-states").hide();
}
});
});
</script>
However the reason is that you've missed on }); at the end. You closed Change but not Ready
I have two <select> elements with different IDs.
When the user selects a value from the first select box, I want the second select box to only display connected values.
My code:
<select id="ExtraField_1" name="ExtraField_1">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
<option value="13">test13</option>
<option value="14">test14</option>
<option value="15">test15</option>
<option value="16">test16</option>
<option value="17">test17</option>
<option value="18">test18</option>
<option value="19">test19</option>
<option value="20">test20</option>
</select>
So when user selects "test1" from first select boxm he will see only "test2", "test3" and "test4" on the second select box; "test2" from first will show "test6", "test7" and "test8" in the second box.
How can I use JavaScript to resolve this problem?
If you can use jQuery then you can always just clear and append the options to the second select.
$('#ExtraField_1').change(function(){
$('#ExtraField_2').find('option').remove()
if($(this).val() == '1'){
$('#ExtraField_2').append($("<option </option>").attr('value','2').text('test2'));
$('#ExtraField_2').append($("<option></option>").attr('value','3').text('test3'));
$('#ExtraField_2').append($("<option></option>").attr('value','4').text('test4'));
}
if($(this).val() == '2'){
$('#ExtraField_2').append($("<option></option>").attr('value','5').text('test5'));
$('#ExtraField_2').append($("<option></option>").attr('value','6').text('test6'));
$('#ExtraField_2').append($("<option></option>").attr('value','7').text('test7'));
}
});
http://jsfiddle.net/8XVuv/2/
using only javascript is a bit more complicated but I would still take the same approach.
function createOption(otext,oValue){
var newOption = document.createElement('option');
newOption.text = otext;
newOption.value = oValue;
return newOption;
}
function clearSelect(theSelect){
for(var i = 0;i <= theSelect.options.length+1;i++)
{
theSelect.remove();
}
}
function onSelect(theSelect){
var nextSelect = document.getElementById('ExtraField_2');
clearSelect(nextSelect);
var selected = theSelect.options[theSelect.selectedIndex];
if(selected.value == 1){
nextSelect.add(createOption('test2','2'));
nextSelect.add(createOption('test3','3'));
nextSelect.add(createOption('test4','4'));
}
if(selected.value == 2){
nextSelect.add(createOption('test5','5'));
nextSelect.add(createOption('test6','6'));
nextSelect.add(createOption('test7','7'));
}
}
with html:
<select id="ExtraField_1" name="ExtraField_1" onchange="javascript: onSelect(this);" >
<option value="0">Select a test..</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="0">Select from the left</option>
</select>
as you can see it still does what you expect but you are not hiding options.
http://jsfiddle.net/upKzW/13/
$('#ExtraField_1').change(function() {
$('#ExtraField_2').val(this.value);
});
http://jsfiddle.net/judearasu/rF8G6/