[HTML]
Now that I have three options in the drop down button:
<select id='campus' class="form-control">
<option value="Z010">Campus1</option>
<option value="Z020">Campus2</option>
<option value="Z040" selected>Campus3</option>
<option value="?????">- All Campuses-</option>
</select>
Now that i want to add a choice of "All Campus" in the drop down menu, which includes all students from all campus, what should i do ?
I can not do the following because i need "AND" within the bracket, not "OR":
<option value="{'Z010', 'Z020', 'Z040'}">All</option>
Any suggestions?
Thank you very much!!
Here is one approach, using a <select multiple> and a few lines of javascript:
var campusOptions = document.getElementsByTagName('option');
var allCampuses = document.querySelector('[value="all-campuses"]');
function selectAllCampuses() {
if (allCampuses.selected === true) {
for (var i = 0; i < (campusOptions.length - 1); i++) {
campusOptions[i].selected = true;
allCampuses.selected = false;
}
}
}
allCampuses.addEventListener('click', selectAllCampuses, false);
<select id="campus" class="form-control" multiple>
<option value="Z010">Campus1</option>
<option value="Z020">Campus2</option>
<option value="Z040" selected>Campus3</option>
<option value="all-campuses">- All Campuses -</option>
</select>
Related
My code:
<select name="Opt1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="Opt2">
<!--- same options "Opt1" -->
</select>
How do I repeat it? without rewriting it, my select will have more than 100 options and I need to repeat select at least 50 times.
Is it possible to create a hidden div and each select I call that div?
I think you can if you are allowed to use JavaScript/jQuery.
Here is an example.. You can add multiple ..
var result = ['Volvo', 'Saab', 'Mercedes', 'Audi'];
var options = "";
for(let i=0; i< result.length; i++){
options+= "<option value='"+result[i].toLowerCase()+"'>"+result[i]+"</option>";
}
$("select").html(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Opt1">
</select>
<select name="Opt2">
<!--- same options "Opt1" -->
</select>
Please can someone help me - I want the second drop-down to change based on a selection from the first option and also the third drop-down to change based on a second selected option. Here is my html:
<select name="selectLevel" id="selectLevel" >
<option value="">-- select a level --</option>
<option value="jhs">Junior High School</option>
<option value="shs">Senior High School</option>
<option value="tertiary 3">Tertiary</option>
</select>
<select name="selectSubject" id="selectSubject">
<option value=""> -- select a subject -- </option>
<option data-value="jhs" value="english">English Language</option>
<option data-value="shs" value="maths">Mathematics</option>
<option data-value="tertiary" value="IT">Business Math</option>
</select>
<select name="selectTopic" id="selectTopic" >
<option value=""> -- select a topic -- </option>
<option data-value="jhs">Spelling</option>
<option data-value="shs">Matrix</option>
<option data-value="tertiary">Calculus</option>
</select>
And here is my script:
$(document).ready(function(){
$('#jhs').change(function(){
if($(this).data('options') == undefined){
$(this).data('options', $('#selectSubject option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#selectSubject').html(options).show();
});
$('#selectSubject').change(function(){
if($(this).data('options') == undefined){
$(this).data('options', $('#selectTopic option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#selectTopic').html(options).show();
});
});
Thank You very much!
I change a little bit to make it easier.
When we change the first select, it will check the second select's option and change its value.
After that, it will trigger the second select's change event and so on.
$(document).ready(function() {
// Save all selects' id in an array
// to determine which select's option and value would be changed
// after you select an option in another select.
var selectors = ['selectLevel', 'selectSubject', 'selectTopic']
$('select').on('change', function() {
var index = selectors.indexOf(this.id)
var value = this.value
// check if is the last one or not
if (index < selectors.length - 1) {
var next = $('#' + selectors[index + 1])
// Show all the options in next select
$(next).find('option').show()
if (value != "") {
// if this select's value is not empty
// hide some of the options
$(next).find('option[data-value!=' + value + ']').hide()
}
// set next select's value to be the first option's value
// and trigger change()
$(next).val($(next).find("option:first").val()).change()
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectLevel" id="selectLevel">
<option value="">-- select a level --</option>
<option value="jhs">Junior High School</option>
<option value="shs">Senior High School</option>
<option value="tertiary">Tertiary</option>
</select>
<select name="selectSubject" id="selectSubject">
<option value=""> -- select a subject -- </option>
<option data-value="jhs" value="english">English Language</option>
<option data-value="shs" value="calculus">Calculus</option>
<option data-value="tertiary" value="IT">Info Tech</option>
</select>
<select name="selectTopic" id="selectTopic">
<option value=""> -- select a topic -- </option>
<option data-value="calculus">Calculus</option>
<option data-value="calculus">Matrix</option>
<option data-value="english">Basic English</option>
<option data-value="english">Basic English 2</option>
<option data-value="IT">Info Tech Studies</option>
<option data-value="IT">Info Tech Studies 2</option>
</select>
i got it u would add script CDN code in your code
https://www.w3schools.com/jquery/jquery_get_started.asp
just above your script code
Like this :
<select name="selectLevel" id="selectLevel" >
<option value="">-- select a level --</option>
<option value="jhs">Junior High School</option>
<option value="shs">Senior High School</option>
<option value="tertiary 3">Tertiary</option>
<select name="selectSubject" id="selectSubject">
<option value=""> -- select a subject -- </option>
<option data-value="jhs" value="english">English Language</option>
<option data-value="shs" value="maths">Mathematics</option>
<option data-value="tertiary" value="IT">Business Math</option>
<select name="selectTopic" id="selectTopic" >
<option value=""> -- select a topic -- </option>
<option data-value="jhs">Spelling</option>
<option data-value="shs">Matrix</option>
<option data-value="tertiary">Calculus</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selectLevel').change(function(){
if($(this).data('options') == undefined){
$(this).data('options', $('#selectSubject option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#selectSubject').html(options).show();
});
$('#selectSubject').change(function(){
if($(this).data('options') == undefined){
$(this).data('options', $('#selectTopic option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#selectTopic').html(options).show();
});
});
You can do this by Ajax request.
I have a form with two options and whenever the user selects the option I want it to go to a URL. Can this be done without submitting the form? If not, could you help me with the submit part?
Here's my code:
<select>
<option value="Webclient" name="">Web Client</a></option>
<option value="DownloadClient" name="">Download Client</option>
</select>
<select name="forma" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>
<select id="options" onchange="optionCheck()">
<option></option>
<option value="Webclient" name="">Web Client</a></option>
<option value="DownloadClient" name="">Download Client</option>
</select>
<script type="text/javascript">
function optionCheck(){
var option = document.getElementById("options").value;
if(option == "Webclient"){
window.location = "http://yahoo.com";
}
if(option == "DownloadClient"){
window.location = "http://google.com";
}
}
</script>
I've got two multiple select lists
<html><head></head>
<body>
<select name="cars" multiple="multiple" size="7">
<option value="">-</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="drivers" multiple="multiple" size="7">
<option value="1">Luiza</option>
<option value="2">Sebastian</option>
<option value="3">John</option>
<option value="4">Arthur</option>
<option value="5">Staszek</option>
<option value="6">Patryk</option>
<option value="7">Lucas</option>
<option value="8">Madlen</option>
<option value="9">Bartek</option>
<option value="10">Inter</option>
</select>
</body></html>
I have to select "drivers" depending on the "cars"
For example, when i select Volvo it atumatically should select Luiza, John and Staszek.
If i select saab, i must have selected Arthur, Inter, Lucas, Patryk
And if it is not possible, then after selecting from the "cars" select "drivers" should be disabled, and when i select "-" from "Cars", "drivers" should be active again.
do this with ajax and load the data from database if it is possible.
or try this with jquery
$(document).ready(function() {
$('#a2').attr("disabled", "disabled");
$('#a1').change(function() {
var str = "";
$("#a1 option:selected").each(function () {
str += $(this).text() + " ";
});
if(str.trim()=="-")
$('#a2').removeAttr("disabled");
else
$('#a2').attr("disabled", "disabled");
});
});
and give id for case as "a1" and drivers for "a2"
Whith jQuery you can do it easyly :
$(document).ready(function (){
$('#select-cars').change(function(){
var car = $('#select-cars').val();
// Uncheck ALL driver
$('#select-drivers option').each(function (index, value) {
$(this).removeAttr('selected');
});
// Check each driver in funcition of the car
if (car == 'volvo') {
//check Luiza etc
$('#select-drivers option[value=1]').attr('selected', 'true');
} else if (car == 'saab') {
}
});
});
I want to change the select option selected to another value.
I.e.,
<select id="myid">
<option value="1" selected="selected">1 </option>
<option value="2" >2 </option>
<option value="3" >3 </option>
<option value="4" >4 </option>
</select>
I have to trigger a change in this select and select the 3rd option I have the value how can I do it.?
I am adding an option each time by a function and I want after each addition of the option, I want it to be selected to do further activities.
To change by index
<input type="button" value="Change Select" onclick="changeSelect(3)" />
function changeSelect(x) {
document.frm.myid.selectedIndex = x-1;
}
to change by value
<input type="button" value="Change Select" onclick="changeSelect1(3)" />
function changeSelect1(x) {
var myid = document.getElementById('myid');
var st = myid.options;
for(var i=0; i<st.length; i++) {
if(st[i].value == x) {
myid.selectedIndex = i;
}
}
}
function Change() {
for (i = 0; i < document.getElementById('ddStream').options.length; i++) {
if (document.getElementById('ddStream').options[i].value == 1)
document.getElementById('ddStream').selectedIndex = i;
}
alert(document.getElementById('ddStream').selectedIndex);
return false;
}
<select id="ddStream" onchange="return Change()">
<option value="">EEE</option>
<option value="">ECE</option>
<option value="">CSE</option>
<option value="1">E&I</option>
</select>
This is the basic syntax.. The other things that you have mentioned will go by the logic u write.. Eg, to select the last option that u add dynamically,
document.getElementById('ddStream').selectedIndex = document.getElementById('ddStream').options.length -1
selected="selected" selects the option you want, just put it on the 3rd option tag
E.g.
<select id="myid">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3" selected="selected">3 </option>
<option value="4">4 </option>
</select>