I have a drop down menu having different options which are hard coded. After that, there is another drop down menu which is disabled when no option from first drop down is selected and when we select any option it is enabled and shows some values.
I want to show different options in second drop down based on the value selected in first drop down i.e. in the same second drop down menu. I have created different divs for every value (having drop downs) selected in first. So i want to call that particular div for every value selected. Here is my code:
<script type="text/javascript">
function check(elem) {
document.getElementById('mySelect1').disabled = !elem.selectedIndex;
}
</script>
<select id="mySelect" onChange="check(this);" >
<option>Select an Option</option>
<option value="all">Select All</option>
<option value="name" >Names</option>
<option value="course" >Courses</option>
</select>
<select id="mySelect1" disabled="disabled" >
<?php
$sql="SELECT DISTINCT names FROM table ";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option value=' " . $row['Sno'] ."'>" . $row['names'] ."</option>";
}
?>
</select>
<select id="mySelect1" disabled="disabled" >
<?php
$sql="SELECT DISTINCT courses FROM table ";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option value=' " . $row['Sno'] ."'>" . $row['courses'] ."</option>";
}
?>
</select>
e.g. When i select name in first drop down menu, it shows me all the names from database in second div and when i select courses it shows me all the courses in the same drop down
You should not give the same id to more than one element.
Here is working example of how you can do what you want
function check(elem) {
document.querySelectorAll('.second').forEach(function(e) {
e.disabled = true;
});
if (elem.value !== "none" && elem.value !== "all") {
document.getElementById(elem.value).disabled = false;
} else if (elem.value === "all") {
document.querySelectorAll('.second').forEach(function(e) {
e.disabled = false;
});
}
}
<select id="mySelect" onChange="check(this);">
<option value="none">Select an Option</option>
<option value="all">Select All</option>
<option value="names">Names</option>
<option value="courses">Courses</option>
</select>
<select id="names" class="second" disabled="disabled">
<option value='John'>John</option>
<option value='Jacob'>Jacob</option>
<option value='Victoria'>Victoria</option>
<option value='Maurice'>Maurice</option>
</select>
<select id="courses" class="second" disabled="disabled">
<option value='Course1'>Course 1</option>
<option value='Course2'>Course 2</option>
<option value='Course3'>Course 3</option>
<option value='Course4'>Course 4</option>
</select>
EDIT
If you want it in one select instead of two then two select fields in html are unnecessary
Here is a working solution for one select with different options depending on first select value.
function check(elem) {
document.getElementById('select2').disabled = false;
document.getElementById('select2').value = "";
document.querySelectorAll('#select2 option').forEach(function(e) {
e.style.display = 'none';
});
if (elem.value === "none") {
document.getElementById('select2').disabled = true;
}
if (elem.value !== "all") {
document.querySelectorAll('#select2 option.' + elem.value).forEach(function(e) {
e.style.display = 'initial';
});
} else {
document.querySelectorAll('#select2 option').forEach(function(e) {
if (e.value !== "") {
e.style.display = 'initial';
}
});
}
}
<select id="select1" onChange="check(this);">
<option value="none">Select an Option</option>
<option value="all">Select All</option>
<option value="name">Names</option>
<option value="course">Courses</option>
</select>
<select id="select2" disabled="disabled">
<option value=""></option>
<option class="name" value='John'>John</option>
<option class="name" value='Jacob'>Jacob</option>
<option class="name" value='Victoria'>Victoria</option>
<option class="name" value='Maurice'>Maurice</option>
<!-- Here instead of html you can insert your php -->
<option class="course" value='Course1'>Course 1</option>
<option class="course" value='Course2'>Course 2</option>
<option class="course" value='Course3'>Course 3</option>
<option class="course" value='Course4'>Course 4</option>
<!-- Here instead of html you can insert your php -->
</select>
EDIT2
Here is a solution for a select with names and courses and two selects after the first one.
function check(elem) {
document.querySelectorAll('.second').forEach(function(e) {
e.style.display = "none";
});
if (elem.value === "all") {
document.getElementById("names").style.display = "initial";
document.getElementById("courses").style.display = "initial";
}
}
<select id="mySelect" onChange="check(this);">
<option value="none">Select an Option</option>
<option value="all">Select All</option>
<option value='John'>John</option>
<option value='Jacob'>Jacob</option>
<option value='Victoria'>Victoria</option>
<option value='Maurice'>Maurice</option>
<option value='Course1'>Course 1</option>
<option value='Course2'>Course 2</option>
<option value='Course3'>Course 3</option>
<option value='Course4'>Course 4</option>
</select>
<select id="names" class="second" style="display: none;">
<option value='John'>John</option>
<option value='Jacob'>Jacob</option>
<option value='Victoria'>Victoria</option>
<option value='Maurice'>Maurice</option>
</select>
<select id="courses" class="second" style="display: none;">
<option value='Course1'>Course 1</option>
<option value='Course2'>Course 2</option>
<option value='Course3'>Course 3</option>
<option value='Course4'>Course 4</option>
</select>
Related
I have this Fiddle : https://jsfiddle.net/Ardee12/tL643rjq/3/
My problem is, I always get the same options at the third select from second select (vice versa), after I select an option from the first one. I need to stick for their own option (second and third select), but still have the populated function from their "rel" attribute. Can anyone please help me?
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
You need to treat each of the kidSelect individually. Loop through each of them at the beginning and store a clone of their own options in each instance.
Then when you change main select, filter each set separately
// store a clone of each kidSelect options on page load
$('.kidSelect').each(function() {
$(this).data('options', $(this).children().clone());
});
$(".mainSelect").change(function() {
var rel = this.options[this.selectedIndex].getAttribute('rel');
// filter each kids options and set in place
$('.kidSelect').html(function() {
return $(this).data('options').filter('[rel=' + rel + ']').clone();
});
// trigger the change on page load also to do initial filtering
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
I'm not entirely sure what you're trying to do but here is a guess.
I think you only want to effect the second select with the changes. For that you need to adjust your selector. It currently selects both selects.
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.js-kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.js-kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect js-kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
i have this code:
$("#country").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('#street option').clone());
}
var id = $(this).val();
$('#street').prop('disabled', false);
var options = $(this).data('options').filter('[class=' + id + ']');
$('#street').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="country">
<option disabled selected>Select ...</option>
<option value='1'>Country_one</option>
<option value='2'>Country_two</option>
<option value='3'>Country_three</option>
<option value='4'>Country_four</option>
</select>
<select disabled class="js-select2" name="street" id="street">
<option disabled selected>Select a Street ...</option>
<option class='1' value='1'>Street_one</option>
<option class='1' value='2'>Street_two</option>
<option class='1' value='3'>Street_three</option>
<option class='1' value='4'>Street_four</option>
<option class='2' value='5'>Street_five</option>
<option class='2' value='6'>Street_six</option>
<option class='3' value='7'>Street_seven</option>
<option class='3' value='8'>Street_eight</option>
<option class='3' value='9'>Street_nine</option>
<option class='3' value='10'>Street_ten</option>
<option>Street not found</option>
</select>
I need when change the option from country in the second dropdownlist stays the Select a Street ... option and when i select the Country_four in the seccond dropdownlist only appears the option Street not found
Added a class default to your select option "Select a street", and added to the .filter() so it will always be selected
Added if / else to check the value selected - If it's anything but 4; Rebuild the options, and Enable the select. If it's 4; Empty the options, Add "Street not found" option, and Disable the select. After both of these, we select the first option so we're always showing the right message first
$('#country').on('change', function() {
// Stores the intial Options into a Data-attribute
if ($(this).data('options') === undefined) {
$(this).data('options', $('#street option').clone());
}
if ($(this).val() !== '4') {
// Fetches the Options from data, and filters for match & default option
let id = $(this).val();
let newOptions = $(this).data('options').filter(`[class="${id}"], [class="default"]`);
$('#street')
.empty()
.append(newOptions)
.prop('disabled', false)
} else {
// Creates an Option, containing only text
let newOptions = $('<option></option>').text("Street not found");
$('#street')
.empty()
.append(newOptions)
.prop('disabled', true)
}
// Selects the first Option in the Select
$('#street')[0].selectedIndex = 0
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="country">
<option disabled selected>Select ...</option>
<option value='1'>Country_one</option>
<option value='2'>Country_two</option>
<option value='3'>Country_three</option>
<option value='4'>Country_four</option>
</select>
<select disabled class="js-select2" name="street" id="street">
<option class="default" disabled selected>Select a Street ...</option>
<option class='1' value='1'>Street_one</option>
<option class='1' value='2'>Street_two</option>
<option class='1' value='3'>Street_three</option>
<option class='1' value='4'>Street_four</option>
<option class='2' value='5'>Street_five</option>
<option class='2' value='6'>Street_six</option>
<option class='3' value='7'>Street_seven</option>
<option class='3' value='8'>Street_eight</option>
<option class='3' value='9'>Street_nine</option>
<option class='3' value='10'>Street_ten</option>
<option>Street not found</option>
</select>
I'm trying to create a form with several select and the user should rank these selects from 1-8. However, I'm having some trouble hiding/removing/disabling the select option.
Here's my form
this is just the first four of the 8 selects to be ranked
<label>Spirituality</label>\
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>School</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Family</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
<label>Friends</label>
<select id="ranks1" class="form-control form-input" name="answer[]" required>
<option value="" selected>--</option>
<?php for ($i=1;$i<=10;$i++){?>
<option value="<?=$i;?>"><?= $i;?></option>
<?php } ?>
</select>
This is what I got so far for my script
$(document).ready(function () {
$("#ranks1").click(function () {
$('#ranks1 option').prop('disabled', true);
});
});
And I did this for the CSS. For the disabled option
select option[disabled] {
display: none !important;
}
More background on what the form looks like.
I think you are wanting the change event, not the click event.
Please consider the following example which disables the selected option on change.
HTML:
<select id="selectlist">
<option value="0">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Javascript:
$('#selectlist').on('change', function() {
var selectedVal = $(this).find(":selected").val();
if (selectedVal != 0) {
// disable selected value
var selectedOption = $(this).find('option[value=' + selectedVal + ']');
selectedOption.attr('disabled', 'disabled');
}
});
JSFiddle: https://jsfiddle.net/tp9urjkb/
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've got some example code, what I want is when the value in the second select list is set to 0 the first one also resets to 0, at the moment they reset each other when a value is selected in one. Any help appreciated thanks:
HTML:
<select name="Standard" id="std" size="6" onClick="selectCheck(this,'del'); return true;">
<option value="0">Select one</option>
<option value="Eggs" selected>Eggs</option>
<option value="Bacon">Bacon</option>
<option value="Toast">Toast</option>
<option value="Ham">Ham</option>
<option value="Home">Home Fries</option>
<option value="Jelly">Jelly</option>
</select>
<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std'); return true;">
<option value="0">Select one</option>
<option value="Omelet">Omelet</option>
<option value="Canadian">Canadian Bacon</option>
<option value="Muffin">Muffin</option>
<option value="Steak">Steak</option>
<option value="Cottage">Cottage Fries</option>
<option value="Preserves">Preserves</option>
</select>
JS:
function selectCheck(me,other) {
var ind = me.selectedIndex;
if (ind > 0) {
document.getElementById(other).selectedIndex = 0;
}
}
Look for the specific ID
if (ind > 0 && other !='del') {
document.getElementById(other).selectedIndex = 0;
}
DEMO
<select name="Standard" id="std" size="6">
<option value="0">Select one</option>
<option value="Eggs" selected>Eggs</option>
<option value="Bacon">Bacon</option>
<option value="Toast">Toast</option>
<option value="Ham">Ham</option>
<option value="Home">Home Fries</option>
<option value="Jelly">Jelly</option> </select>
<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std'); return true;">
<option value="0">Select one</option>
<option value="Omelet">Omelet</option>
<option value="Canadian">Canadian Bacon</option>
<option value="Muffin">Muffin</option>
<option value="Steak">Steak</option>
<option value="Cottage">Cottage Fries</option>
<option value="Preserves">Preserves</option>
</select>
<script>
function selectCheck(me,other) { var ind = me.selectedIndex; if (ind<1) { document.getElementById(other).selectedIndex = 0; } }
</script>