I have two drop downs dependent on each other.
When I'm selecting the FRUIT, I want to show only one Apple value from select2 and hide all the others but when I'm selecting Animal I want to show all the values
Please help me write the Javascript function.
Thanks.
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
//This is my java script function
function display(){
var access=document.getElementById("select1");
var list = document.getElementById("select2");
var selectlist=access[access.selectedIndex].value;
if(selectlist="APPLE"){
list.style.visiblity="hidden";
}else{
list.style.visiblity="block";
}
FIDDLE
//Add eventlistener for change-event
document.getElementById("selCategory").addEventListener("change", filter, false);
//Filter function which will filter on selected value from first select.
function filter()
{
var cat = document.getElementById("selCategory");
var opt = document.getElementById("selOptions");
var selectedValue = cat.options[cat.selectedIndex].value;
var firstEl = false;
var firstIndex = 0;
for(var i = 0; i < opt.options.length; i++)
{
if(opt.options[i].value !== selectedValue)
{
opt.options[i].style.display = "none";
}
else
{
opt.options[i].style.display = "block";
if(!firstEl)
{
firstIndex = i;
firstEl = true;
}
}
}
opt.value = opt.options[firstIndex].value;
}
//Execute on first load, second select is filtered from the start.
filter();
<select name="category" id="selCategory">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="options" id="selOptions">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
Related
I would like to change the options of a selection dynamically in HTML if a checkbox is checked/because of another selection.
These are my selections:
<!-- choosing -->
<select name="choose" id="choose">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<!-- if choose == o1 -->
<select name="subject1" id="subject1">
<option value="">-- choose --</option>
<option value="Religion">Religion</option>
<option value="Spansich">Spanisch</option>
<option value="Französisch">Französisch</option>
<option value="Englisch">Englisch</option>
<option value="Latein">Latein</option>
</select>
<!-- if choose == o2 -->
<select name="subject2" id="subject2">
<option value="">-- choose --</option>
<option value="Geschichte">Geschichte</option>
<option value="GMK">GMK</option>
<option value="WBS">WBS</option>
<option value="Kunst">Kunst</option>
</select>
I guess you would use JavaScript for this, but I'm really new to all of that, so, could you show me what kind of function could be used to solve this.
<select name="choose" id="choose">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<select name="subject" id="subject"></select>
<script>
const option = document.getElementById("choose")
option.addEventListener("change", (evt) => {
let options1 = `<option value="">-- choose --</option>
<option value="Religion">Religion</option>
<option value="Spansich">Spanisch</option>
<option value="Französisch">Französisch</option>
<option value="Englisch">Englisch</option>
<option value="Latein">Latein</option>`
let options2 = `<option value="">-- choose --</option>
<option value="Geschichte">Geschichte</option>
<option value="GMK">GMK</option>
<option value="WBS">WBS</option>
<option value="Kunst">Kunst</option>`
if(option.value == "o1")
document.getElementById("subject").innerHTML = options1;
else if(option.value == "o2")
document.getElementById("subject").innerHTML = options2;
else
document.getElementById("subject").innerHTML = '';
})
</script>
Try this
<select name="choose" id="choose" onchange="custom_change()">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<select name="subject2" id="subject"></select>
<script>
function custom_change()
{
var choose_value = document.getElementById("choose").value;
var option_1 = "<option value=''>-- choose --</option><option value='Religion'>Religion</option><option value='GMK'>GMK</option><option value='WBS'>WBS</option><option value='Kunst'>Kunst</option>";
var option_2 = "<option value=''>-- choose --</option><option value='Geschichte'>Geschichte</option><option value='GMK'>GMK</option><option value='WBS'>WBS</option><option value='Kunst'>Kunst</option>";
if(choose_value == "o1")
document.getElementById("subject").innerHTML = option_1;
else if(choose_value == "o2")
document.getElementById("subject").innerHTML = option_2;
else
document.getElementById("subject").innerHTML = '';
}
</script>
When the Primary dropdown changes, I want the other dropdown to change accordingly.
But I dont know why only the 1st Other dropdown is working while the 2nd fails to change its value accordingly. I
m aware that if I change the name of the 2nd dropdown to the same as the 1st dropdown it will work.
But as they are different fields that are to be saved in the db, so the names have to be different.
Any solution would be appreciated. Many thanks.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.getElementsByName('Qualifications');
for (i = 0; i < others.length; i++)
others[i].selectedIndex = index_name;
var others2 = document.getElementsByName('Qualifications2');
for (i = 0; i < others2.length; i++)
others2[i].selectedIndex = index_name2;
}
Primary dropdown<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown2
<select id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
Add a css class to your secondary drop downs and use document.querySelectorAll to get them all at once.
Then you can use a single loop to update their selectedIndex.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
}
div {
padding: 15px;
}
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<div> <b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
So it turns out i haven't defined sth in my code, thanks for pointing that out #Tiny Giant
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var index_name2 =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.getElementsByName('Qualifications');
for (i = 0; i < others.length; i++)
others[i].selectedIndex = index_name;
var others2 = document.getElementsByName('Qualifications2');
for (j = 0; j < others2.length; j++)
others2[j].selectedIndex = index_name2;
}
Primary dropdown<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select> other dropdown2
<select id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
Below are the dropdown data..
<select size="1" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
I want to get alert/pop up when I select the data which is start from IN in drop down list.
Try this:
https://jsfiddle.net/mminetto/bggwnkwj/
var select = $('select[name="Test_Data"]');
select.on('change', function(){
var options = select.children('option:selected');
if(options.length > 0 && options[0].innerText.startsWith("IN")){
alert(this.value);
alert(options[0].innerText);
}
});
<select size="1" name="Test_Data" id="dropdown">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
in javascript
<script>
$("#dropdown").change(function(){
if($(this).find("option:selected").text().startsWith("IN")){
alert("option with IN selected =>"+$(this).find("option:selected").text());
}
});
</script>
Try this code
HTML
<select size="1" onChange="showAlert()" id="dataCountry" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
</select>
JavaScript
<script>
function showAlert() {
var el = document.getElementById('dataCountry'); // get the index
var text = el.options[el.selectedIndex].innerHTML; // get the label
var n = text.search("IN"); //search number of IN
if(n>=0) {
alert(text);
}
}
</script>
I have a JSP page that is populating 3 different drop down menus.
They are all populated the same. I am looking for a javascript way that in realtime if they choose one from the dropdown the next one they go to the dropdown list won't have that option in it.
Say you have 3 selects "Select1","Select2",and "Select3". Add onchange event to "Select1":
<script language="javascript">
function Select1_OnChange() {
var elemSelect1 = document.getElementById("Select1");
var elemSelect2 = document.getElementById("Select2");
var elemSelect3 = document.getElementById("Select3");
var selValue = elemSelect1.options[elemSelect1.selectedIndex].value;
elemSelect2.remove(getIndexFromValue(elemSelect2,selValue));
elemSelect3.remove(getIndexFromValue(elemSelect3, selValue));
}
function Select2_OnChange() {
var elemSelect2 = document.getElementById("Select2");
var elemSelect3 = document.getElementById("Select3");
var selValue = elemSelect2.options[elemSelect2.selectedIndex].value;
elemSelect3.remove(getIndexFromValue(elemSelect3, selValue));
}
function getIndexFromValue(objSelect,strValue) {
var ret;
for (i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == strValue) {
ret = i;
}
}
return ret;
}
</script>
Tags might look like:
<select id="Select1" name="Select1" size="1" onchange="Select1_OnChange()>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<select id="Select2" name="Select2" size="1" onchange="Select2_OnChange()>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<select id="Select3" name="Select3" size="1">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
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/