i have a selection list that contains for example countries :
<select id="Countries" name="Countries" onChange="check();">
<option id="Countrie1" name="Countrie1">Country 1</option>
<option id="Countrie2" name="Countrie2">Country 2</option>
</select>
I want to use Javascript to hide and show another select list (Teams list) depending from the selected element of the countries select list.
For example if Country 1 is selected then show the teams' selection list of Country 1
<select id="Teams_Country_1" name="Teams_Country_1">
<option id="C1_Team1" name="C1_Team1">Team_1_Country_1</option>
<option id="C1_Team2" name="C1_Team2">Team_2_Country_1</option>
</select>
if Country 2 is selected then hide the first one and show the second one in the same position.
<select id="Countries" name="Countries">
<option id="C2_Team1" name="C2_Team1">Team_1_Country_2</option>
<option id="C2_Team2" name="C2_Team2">Team_2_Country_2/option>
</select>
This is the code I am trying to modify to make it work.
function check() {
var el = document.getElementById("Countries");
var str = el.options[el.selectedIndex].text;
if (str == "Countrie1") {
showTeamsC1();
hideTeamsC2();
} else if (str == "Countrie2") {
showTeamsC2();
hideTeamsC1();
}
}
function hideTeamsC1() {
document.getElementById('Teams_Country_1').style.visibility = 'hidden';
}
function showTeamsC1() {
document.getElementById('Teams_Country_1').style.visibility = 'visible';
}
function hideTeamsC2() {
document.getElementById('Teams_Country_2').style.visibility = 'hidden';
}
function showTeamsC2() {
document.getElementById('Teams_Country_2').style.visibility = 'visible';
}
But this dosen't show the select list in the same position, and if I do it manually (try to use margin-top) it covers the other list.
You need to use display: none; instead of visibility:hidden;
What is the difference between visibility:hidden and display:none?
Visibility hidden is hiding the element but keep its space, but display:none; hide it without keeping its space.
So your code will be something like this:
function hideTeamsC1() {
document.getElementById('Teams_Country_1').style.display = 'none';
}
function showTeamsC1() {
document.getElementById('Teams_Country_1').style.display = 'block';
}
function hideTeamsC2() {
document.getElementById('Teams_Country_2').style.display = 'none';
}
function showTeamsC2() {
document.getElementById('Teams_Country_2').style.display = 'block';
}
Related
Hello is there any way to disable multiple options in a select form if you only choose one option?
For example:
First Select Form
<select name="secondchoice" id="second">
<option value="None">None</option>
<option value="Content Dev">Content Dev</option>
<option value="Web">Web</option>
<option value="Science">Science</option>
<option value="Managing">Managing</option>
</select>
Second Select Form
<select name="day2" id="exam2">
<option value="None">None</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
</select>
If I select "None" in the first form then the second form must disable the options "Monday-Thursday" the only option available must be also "None" in the second form. Thank you!
You can do this with javascript by hiding options in the second elements whenever the first select element changes by checking its value and hiding elements accordingly like so:
// Select Elements
const first = document.getElementById('first')
const second = document.getElementById('second')
// Option Elements
const one = document.getElementById('one')
const two = document.getElementById('two')
// Runs whenever first select has changed
first.onchange = () => {
// Checks First Selects Value
if (first.value === '1') {
// If '1' then hide TWO and show ONE
second.value = 'ONE'
one.hidden = false
two.hidden = true
} else if (first.value === '2') {
// Else, if '2' then hide ONE and show TWO
second.value = 'TWO'
one.hidden = true
two.hidden = false
}
}
<select id='first'>
<option>1</option>
<option>2</option>
</select>
<select id='second'>
<option id='one'>ONE</option>
<option id='two'>TWO</option>
</select>
This is a very basic example and can be improved alot.
you can do something like below, so when you do selecting none, other options would be disabled, and other than none it would be enabled again
function disabledEnabled(event) {
var optiosLists = document.getElementById("exam2").options;
for (let i = 0; i < optiosLists.length; i++) {
if(event.target.value === "None"){
optiosLists[i].disabled = true;
optiosLists[0].disabled = false;
} else {
optiosLists[i].disabled = false;
}
}
}
You can either disabled select element itself and each of its options. You can find 2 ways to achieve each of those below.
Disabling Select Element
Disabling Option Element
I'm having Two Dropdown name as Product and Product line and both are dependent on each other such that after selecting any product only Product Line dropdown will get enable. the sample structure is as below.
<select name="abb_sf_partners-product" data-abb-sf-productelement="" class="abb-select" disabled="">
<option value="">All products</option>
<option value="AA">Product1</option>
<option value="BB">Product2</option>
<option value="BB">Product3</option>
</select>
<select name="abb_sf_partners-product-line" data-abb-sf-productelement="" class="abb-select" disabled="">
<option value="">All products Line</option>
<option value="CC">ProductLine1</option>
<option value="DD">ProductLine2</option>
<option value="EE">ProductLine3</option>
</select>
<SCRIPT>
document.addEventListener("DOMContentLoaded", function() {
checkDropdownvalue();
});
function disableProductline() {
document.querySelector('select[name="abb_sf_partners-product-line"]').disabled = true;
}
function checkDropdownvalue() {
document.querySelector('select[name="abb_sf_partners-product"]').onchange = (e) => {
var selectedProductline = e.target.value;
alert(e.target.value)
if (selectedProductline == "AA") {
disableProductline();
}
}
}
</SCRIPT>
on select of AA in product dropdown ill needed to disable the ProductLine Dropdown.
But i'm guessing due to some razor view changes Product Line dropdown is keep getting enable as the data in Product Line is dynamically inserted
So is there any way such that my code will execute at the end to disable it.
You can try this approach.
document.addEventListener("DOMContentLoaded", function() {
checkDropdownvalue();
});
function checkDropdownvalue() {
const productSelect = document.querySelector('[name="abb_sf_partners-product"]');
const productLine = document.querySelector('[name="abb_sf_partners-product-line"]')
productSelect.addEventListener('change', function(e) {
if (e.target.value === 'AA') {
productLine.disabled = true;
} else {
productLine.disabled = false;
}
});
}
<select name="abb_sf_partners-product" data-abb-sf-productelement="" class="abb-select">
<option value="">All products</option>
<option value="AA">Product1</option>
<option value="BB">Product2</option>
<option value="BB">Product3</option>
</select>
<select name="abb_sf_partners-product-line" data-abb-sf-productelement="" class="abb-select" disabled="true">
<option value="">All products Line</option>
<option value="CC">ProductLine1</option>
<option value="DD">ProductLine2</option>
<option value="EE">ProductLine3</option>
</select>
As mentioned in My case Product Line dropdown was getting enable due to some razor view code. In order resolve this instead of comparing value of a product on change of product dropdown I have done the comparison on Product Line dropdown like if i hover my mouse over Product line dropdown it then trigger an event to check the selected product and compare it with the one i want (i have not used onClick as momentarily(for few milisec) it open the dropdown and then disable it ) i have used below JS script to achieve this.
document.addEventListener("DOMContentLoaded", function()
{
document.querySelector('select[name="abb_sf_partners-product-line"]').onmouseover = function fun() {
var selectedproduct = getSelectedProduct();
/* alert(selectedproduct.value); */
if(selectedproduct.value == "AA")
{
document.querySelector('select[name="abb_sf_partners-product-line"]').disabled = true;
}
else
{
document.querySelector('select[name="abb_sf_partners-product-line"]').disabled = false;
}
}
});
function getSelectedProduct(){
var sel = document.querySelector('select[name="abb_sf_partners-product"]');
var selectedP = getSelectedOption(sel);
function getSelectedOption(sel) {
var opt;
for ( var i = 0, len = sel.options.length; i < len; i++ ) {
opt = sel.options[i];
if ( opt.selected === true ) {
break;
}
}
return opt;
}
return selectedP
}
I hope it will help someone lol.
Got a form with a div dropdown which when select will display/hide another div.
<div>
<select id="currency" name="currency" onChange="display_payroll_div(this.selectedIndex);">
<option value="0">Currency for your quote*</option>
<option value="AUD">AUD</option>
<option value="USD">USD</option>
<option value="Pounds">GBP</option>
</select>
</div>
<div id="payroll-div">
<select id="report-payroll" name="report-payroll">
<option value="0">Would you like us to do payroll?*</option>
<option value="1">Yes, I would like payroll</option>
<option value="2">No, I don't need payroll</option>
</select>
</div>
Javascript:
function display_payroll_div(e){
currency_value=document.getElementById('currency').value;
document.getElementById('payroll-div').style.display = "none";
if (currency_value == 'AUD') {
document.getElementById('payroll-div').style.display = "block";
}
}
The display/hide is fine but the issue I have is when I select 'AUD' and 'Yes, I would like payroll' and then change my mind and change to 'USD' the hidden field payroll will still keep the value of 'Yes,...'. Is there anyway to reset 'payroll-div' to default value?
All suggestions I've seen uses 'onClick' which I'm trying to avoid as it does not work in FF. Any help would be appreciated :)
Reference: Reset the Value of a Select Box
add this in your code:
else
{
document.getElementById('report-payroll').selectedIndex = 0;
//reseting value when currency_value != 'AUD'
}
DEMO
Try this:
function display_payroll_div(e){
currency_value=document.getElementById('currency').value;
document.getElementById('payroll-div').style.display = "none";
if (currency_value == 'AUD') {
document.getElementById('payroll-div').style.display = "block";
}
else {
document.getElementById('report-payroll').selectedIndex = 0;
}
}
Working jsFiddle Demo.
Change the function like below
function display_payroll_div(e){
currency_value=document.getElementById('currency').value;
document.getElementById('payroll-div').style.display = "none";
if (currency_value == 'AUD') {
document.getElementById('payroll-div').style.display = "block";
} else {
document.getElementById('report-payroll').value ='0';
}
}
JSFiddle Demo
You can use
document.getElementById('report-payroll').options[0].selected = true;
I suggest this:
JSFIDDLE
1) unobtrusive
2) can handle a reload
<select id="currency" name="currency">
using
window.onload=function() {
document.getElementById("currency").onchange=function(){
var currency_value = this.value,
payrollDiv = document.getElementById('payroll-div');
payrollDiv.style.display = currency_value=="AUD"?"block":"none";
if (currency_value!="AUD") document.getElementById("report-payroll").selectedIndex=0;
}
document.getElementById("currency").onchange(); // hide or show when loading
}
I am trying to add a textarea based on the "Other" being one of the choices in an array.
Here is the code.
First the div and the select statement
<div id="refertodiv">
<label for="referto">Refer to:</label>
<select multiple="multiple" name="referto" id="referto">
<option value="1">Infection Control</option>
<option value="2">Medical</option>
<option value="3">Nursing Administration</option>
<option value="4">Personnel</option>
<option value="5">Quality Committee</option>
<option value="6">Risk and Safety</option>
<option value="7">Other</option>
</select>
</div>
Here is the function.
$(function(){
$("#referto").change(function(){
var rechange = [];
$('#referto :selected').each(function(){
rechange[$(this).val()]=$(this).text();
});
var textarea = "<textarea name='referother' id='referother' />";
if($.inarray("Other",rechange)>-1){
$("#referto").append(textarea);
}
})
})
You don't need to use arrays at all. This code will add the textarea if other is selected and remove the textarea if other is deselected.
Here's a fiddle: http://jsfiddle.net/LimitedWard/3GKm5/1/
$("#referto").change(function(){
var otherSelected = false;
$('#referto option:selected').each(function(){
if ($(this).text() == "Other")
{
otherSelected = true;
}
});
if (otherSelected) /* add textarea if otherSelected was true */
{
var textarea = "<textarea name='referother' id='referother' />";
$("#referto").after(textarea);
}
else /* remove textarea if otherSelected was false */
{
$("#referother").remove();
}
});
Note that you were using .append() which places the textarea inside the <select> element, whereas I used .after() which places the textarea just after the <select> element. Putting the textarea inside another input is invalid.
How do you take a value of an option in a select form and use it for a if else statement?
for example if apple is selected as an option then write to the document how to make applesauce but orange is selected then write how to make orange?
so far I have a basic form and select options and I know how to do the document.write but I dont know how to use a select form with if else
thanks for the help
First, make sure you have an id on your <select> allowing you to reference it from Javascript:
<select id="fruits">...</select>
Now, you can use the options and selectedIndex fields on the Javascript representation of your <select> to access the current selected value:
var fruits = document.getElementById("fruits");
var selection = fruits.options[fruits.selectedIndex].value;
if (selection == "apple") {
alert("APPLE!!!");
}
var select = document.getElementById('myList');
if (select.value === 'apple') {
/* Applesauce */
} else if (select.value === 'orange') {
/* Orange */
}
Your HTML markup
<select id="Dropdown" >
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
</select>
Your JavaScript logic
if(document.getElementById('Dropdown').options[document.getElementById('Dropdown').selectedIndex].value == "Apple") {
//write applesauce
}
else {
//everything else
}
Alternatively you can do this.
var fruitSelection = document.formName.optionName; /* if select has been given an name AND a form have been given a name */
/* or */
var fruitSelection = document.getElementById("fruitOption"); /* If <select> has been given an id */
var selectedFruit = fruitSelection.options[fruitSelection.selectedIndex].value;
if (selectedFruit == "Apple") {
document.write("This is how to make apple sauce....<br />...");
} else {
}
//HTML
<!-- For the 1st option mentioned above -->
<form name="formName">
<select name="optionName> <!-- OR -->
<select id="optionName">
<option value="Apple">Apple</option>
<option value="Pear">Pear</option>
<option value="Peach">Peach</option>
</select>
</form>