Linking three drop down menu together - javascript

I am trying to recreate a "linked" drop down menu by using someone else's code but extend it to link not just 2 but 3. Now my code is working but I am facing 2 problems all to do with the final link!
the final "3rd" drop down (organiser) displays the same organisers doesn't matter which "state" and/or "store" were chosen
the final "3rd" drop down (organiser) doesn't reset to "select the organiser" when new "State" and or "store were picked. The second one "store" does when new "state" is picked.
Thank you for your advice!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<style type="text/css">
.subcat option {
display: none;
}
.subcat option.label {
display: inline;
}
</style>
<script>
function goToNewPage()
{
var url = document.getElementById('organiser').value;
console.log(url);
if(url != 'none') {
window.location = url;
}
}
</script>
<script type="text/javascript">
$(function(){
var $cat = $("#state"),
$subcat = $(".subcat");
$organiser = $(".organiser");
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
});
$subcat.on("change",function(){
var _org = $(this).val();
$organiser.find("option").attr("style","");
$organiser.val("");
if(!_org) return $organiser.prop("disabled",true);
$organiser.find("[org="+_org+"]").show();
$organiser.prop("disabled",false); });
});
</script>
<form id="formname" name="Sate-Store">
<select name="state" id="state">
<option value="">Select state</option>
<option value="ma">MA</option>
<option value="me">ME</option>
<option value="nh">NH</option>
</select>
<select disabled="disabled" class="subcat" id="store" name="store">
<option value>Select a store</option>
<!-- MA -->
<option rel="ma" value="ma_store_1">MA Store 1</option>
<option rel="ma" value="http://www.google.com">MA Store 2</option>
<option rel="ma" value="ma_store_3">MA Store 3</option>
<option rel="ma" value="ma_store_4">MA Store 4</option>
<option rel="ma" value="ma_store_5">MA Store 5</option>
<!-- ME -->
<option rel="me" value="me_store_1">ME Store 1</option>
<option rel="me" value="me_store_2">ME Store 2</option>
<option rel="me" value="me_store_3">ME Store 3</option>
<option rel="me" value="me_store_4">ME Store 4</option>
<option rel="me" value="me_store_5">ME Store 5</option>
<!-- MH -->
<option rel="nh" value="nh_store_1">NH Store 1</option>
<option rel="nh" value="nh_store_2">NH Store 2</option>
<option rel="nh" value="nh_store_3">NH Store 3</option>
<option rel="nh" value="nh_store_4">NH Store 4</option>
<option rel="nh" value="nh_store_5">NH Store 5</option>
</select>
<select disabled="disabled" class="organiser" id="organiser" name="organiser">
<option value>Select the organiser</option>
<!-- MA -->
<option org="ma_store_1" value="https://test.com/">Jack</option>
<option org="ma_store_1" value="James">James</option>
<option org="ma_store_1" value="Frank">Frank</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
</body>
</html>
Tried Jfiddle and the code still have the same problem.

Related

How to connect two dropdown menu?

I am trying to recreate a "linked" drop down menu by using someone else's code. But for some reason the code isn't executing. I can select the first drop down but it does nothing to the second one.
I use JFiddle and paste code into relevant sections and it worked!
So I am a little lost.
Thank you for your advice!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<style type="text/css">
.subcat option {
display: none;
}
.subcat option.label {
display: inline;
}
</style>
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('store').value;
console.log(url);
if(url != 'none') {
window.location = url;
}
}
</script>
<script type="text/javascript">
$(function(){
var $cat = $("#state"),
$subcat = $(".subcat");
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
});
});
</script>
<form id="formname" name="Sate-Store">
<select name="state" id="state">
<option value="">Select state</option>
<option value="ma">MA</option>
<option value="me">ME</option>
<option value="nh">NH</option>
</select>
<select disabled="disabled" class="subcat" id="store" name="store">
<option value>Select a store</option>
<!-- MA -->
<option rel="ma" value="ma_store_1">MA Store 1</option>
<option rel="ma" value="http://www.google.com">MA Store 2</option>
<option rel="ma" value="ma_store_3">MA Store 3</option>
<option rel="ma" value="ma_store_4">MA Store 4</option>
<option rel="ma" value="ma_store_5">MA Store 5</option>
<!-- ME -->
<option rel="me" value="me_store_1">ME Store 1</option>
<option rel="me" value="me_store_2">ME Store 2</option>
<option rel="me" value="me_store_3">ME Store 3</option>
<option rel="me" value="me_store_4">ME Store 4</option>
<option rel="me" value="me_store_5">ME Store 5</option>
<!-- MH -->
<option rel="nh" value="nh_store_1">NH Store 1</option>
<option rel="nh" value="nh_store_2">NH Store 2</option>
<option rel="nh" value="nh_store_3">NH Store 3</option>
<option rel="nh" value="nh_store_4">NH Store 4</option>
<option rel="nh" value="nh_store_5">NH Store 5</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
</body>
</html>
Tried using JFiddle - it worked
I have tested your code. It works on JSFiddle but does not work in plain HTML. The problem is jquery.js failed to load.
you can change that library from
//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js
to
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js
You can connect two dropdown menus by linking the options in the first dropdown to control the options in the second dropdown. This is often referred to as "cascading dropdowns". Here are the steps to do this:
Determine the options for each dropdown menu and create the HTML code to display the dropdown menus on your webpage.
Use JavaScript or a JavaScript library such as jQuery to create an event listener for the first dropdown menu. This event listener should detect when a user selects an option in the first dropdown and update the options in the second dropdown based on the selection.
In the event listener function, create a conditional statement that checks the selected option in the first dropdown and updates the options in the second dropdown accordingly.
Repeat step 3 for each possible selection in the first dropdown to control the options in the second dropdown.
Test your code to ensure that the options in the second dropdown update correctly based on the selection in the first dropdown.

How to change values based on the selection from the drop-down list in JavaScript?

In my drop-down list, I have selection 1(A) and selection 2(B). If I select A from the drop-down list, I want to see a name, Janifer. If I select B, I want to see another name, David.
var mylist = document.getElementById("mylist");
if (mylist.value == "1") {
document.getElementById('myalllist').getElementsByTagName('option')[1].selected = 'selected';
}
if (mylist.value == "2") {
document.getElementById('myalllist').getElementsByTagName('option')[2].selected = 'selected';
}
HTML:
<select id="mylist" onchange="fndropoption()">
<option>Select</option>
<option>1</option>
<option>2</option>
</select>
<select id="myalllist" onchange="fndropoption()">
<option value="1">xxxxxxxx</option>
<option value="2">yyyyyyyy</option>
</select>
I couldn't get it to work with onChange attribute either. This works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var foo=document.getElementById("mylist");
foo.onchange=function() {
if(foo.options.selectedIndex != 0) {
document.getElementById("myalllist").options.selectedIndex = foo.options.selectedIndex-1;
}
}
}
</script>
</head>
<body>
<select id="mylist">
<option value="0" selected="selected">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="myalllist" onChange="">
<option value="1">xxxxxxxx</option>
<option value="2">yyyyyyyy</option>
</select>
</body>
</html>
try this - the onchange should be on the first dropdown list - to trigger the change for the second list. Seems to work, eg: selecting 3 in the first list causes the selection of 3 in the second list.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select id="list1" onChange="changeList()">
<option value="0" selected="selected">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="list2" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script>
function changeList()
{
var selectedOption=document.getElementById("list1").options.selectedIndex;
document.getElementById("list2").options.selectedIndex = selectedOption;
var selectedOption2=document.getElementById("list2").options.selectedIndex;
console.log(selectedOption2)
}
</script>
</body>
</html>

How to Merge Java scripts to change font size and font color By getting User Input

I have written separate Javascript to change font color and font size. How to merge it to make the change of both simultaneously to the same font.
`enter code here`
<!DOCTYPE html>
<html>
<body>
<form>
<select onchange="ChangeFont (this);" size="1">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option selected="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
</select>
<span id="fontTest" style="font-size-adjust: 0.6">Change font-size-adjust</span>
</form>
<script type="text/javascript">
function ChangeFont (selectTag) {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the selected options values
var selectState = selectTag.options[whichSelected].text;
var fontTest = document.getElementById ("fontTest");
if ('fontSizeAdjust' in fontTest.style) {
fontTest.style.fontSizeAdjust = selectState;
} else {
alert ("Your browser doesn't support this example!");
}
}
</script>
</body>
</html>
Another one is font color change:
<!DOCTYPE html>
<html>
<body>
</form>
<select name="color" type="text" onchange="changeBackground(this);" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<span id="coltext">This text should have the same color as you put in the text box</span>
</form>
<script>
function changeBackground(obj) {
document.getElementById("coltext").style.color = obj.value;
}
</script>
</body>
</html>
How to merge these two Java scripts? Please help me.
Try this
<!DOCTYPE html>
<html>
<body>
<form>
<select onchange="ChangeBackgroundFont(this,'font');" size="1">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option selected="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
</select>
<select name="color" type="text" onchange="ChangeBackgroundFont(this,'background');" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<span id="fontbackgroundTest" style="font-size-adjust: 0.6">Change font-size-adjust</span>
</form>
<script type="text/javascript">
function ChangeBackgroundFont (selectTag,type) {
if(type=="font") {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the selected options values
var selectState = selectTag.options[whichSelected].text;
var fontTest = document.getElementById ("fontbackgroundTest");
if ('fontSizeAdjust' in fontTest.style) {
fontTest.style.fontSizeAdjust = selectState;
} else {
alert ("Your browser doesn't support this example!");
}
}else{
document.getElementById("fontbackgroundTest").style.color = selectTag.value;
}
}
</script>
</body>
</html>
I did for you enjoy ):

How to Disable the combobox values on selection in multiple comboboxes JQuery?

I want to disable the values in combobox on selection for multiple comboboxes.
Like i have a four combobox1, combobox2, combobox3, combobox4 with values Select,1,2,3,4 and 5.
Now, if i select value '1' from combobox1, then it should be disabled from all other comboboxes. And then if i select '2' from combobox2, then it should be disabled in combobox1 and combobox3 with value '1' disabled in combobox3 also.
More clearly :
Combobox1 - selected - value '1'
Combobox2 - selected - value '2'
Combobox3 - selected - value '3'
Now the result should be :
Combobox1 - Disabled values - '2','3' but not 1/3/4/5
Combobox2 - Disabled values - '1','3' but not 3/4/5
Combobox3 - Disabled values - '1','2' but not 3/4/5
Combobox4 - Disabled values - '1','2','3' but not 4/5
EDIT
If Combobox1 is selected with Option "Select" then it should disable all the other combobxes except combobox1 and reset all the values with 0 index for all other comboboxes.
But what happening with the code, when i select value 1 from combobox it is disabled for combobox 2 and 3, but when selecting value '2' from combobox2, the value '1' combobox3 gets enabled.
Here is what i have done so far :
HTML Code :
<head>
<title>Language test page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<select name="g1" id="select_g1">
<option value="select1">Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select name="g2" id="select_g2">
<option value="select2">Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select name="g3" id="select_g3">
<option value="select3">Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</body>
</html>
JQuery Code :
<script>
$(document).ready(function(){
$('select').on('change', function (e) {
$('select option').prop('disabled', false);
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$("select option:contains('" + valueSelected + "')").each(function(){
if(valueSelected === this.value){
this.disabled = true;
}else{
this.disabled = false;
}
});
});
});
</script>
Any help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("select").on("change", function(e){
e.preventDefault();
console.log($(this).val());
var valueSelected = $(this).val()
$("select option:contains('" + valueSelected + "')").prop("disabled", true);
});
});
</script>
</head>
<body>
<select name="g1">
<option value="select1">Select</option>
<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>
</select>
<select name="g2">
<option value="select2">Select</option>
<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>
</select>
<select name="g3">
<option value="select3">Select</option>
<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>
</select>
<select name="g4">
<option value="select4">Select</option>
<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>
</select>
</body>
</html>
This disable de option in other "select"
$(document).ready(function(){
$("select").change(function(e){
var id = $(this).attr("id");
var value = this.value;
$("select option").each(function(){
var idParent = $(this).parent().attr("id");
if(id != idParent){
if(this.value == value){
this.disabled = true;
}
}
})
})
});
Did you tried with this.prop('disabled', false) ?

HTML form is not working with javascript

Blockquote
Hi i have this problem:
My HTML page is working fine without form, but when i put the form, than i can't select on the 1/2 finle and in finle.
See my code.
How can i solve this probleem?
Blockquote
<html>
<body bgcolor=#0B4C5F>
<head>
<script type="text/javascript">
function groupA(val) {
var x = document.getElementById("groupAB");
x.options[1].value = val;
x.options[1].text = val;
}
function groupAB(val) {
var x = document.getElementById("groupABCD");
x.options[1].value = val;
x.options[1].text = val;
}
function groupABCD(val) {
var x = document.getElementById("groupABCDEFGH");
x.options[1].value = val;
x.options[1].text = val;
}
</script>
</head>
<!--=========================================================-->
<form action="insert.php" method="post">
<!-------------------------------------------------------------------------->
<select name="Achtstelfinale1" onchange="groupA(this.value)">
<option value="Select">1e GROUP A</option>
<option value="Brazil">Brazil</option>
<option value="Mexico">Mexico</option>
<option value="Croatia">Croatia</option>
<option value="Cameroon">Cameroon</option>
</select>
<p></p>
<select name="1/4 Finale 1" id="groupAB" onchange="groupAB(this.value)">
<option value="Select">1/4 Finale 1</option>
<option value="">?</option>
<option value="">?</option>
</select>
<p></p>
<select name="1/2 Finale" id="groupABCD" onchange="groupABCD(this.value)">
<option value="Select">1/2 FINALE 1</option>
<option value="">?</option>
<option value="">?</option>
</select>
<p></p>
<select name="Finale" id="groupABCDEFGH" onchange="groupABCDEFGH(this.value)">
<option value="Select">FINALE 1</option>
<option value="">?</option>
<option value="">?</option>
</select>
<!----------------->
</form>
<!----------------->
</body>
</html>
you can try and change the html tags. it should look like this:
<html>
<head>`
#Here goes the Head section(title,links, meta tags and all that stuff)
</head>
<body>
#Here goes the body section
</body>
</html>
Hope it was helpfull...
if you have more questions just ask and the stack community will be glad to help you out

Categories