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>
Related
I have a local server with NodeJs and on one page I have three select tags. I would like when one option in the first select tag is selected to completely remove it from the list of the other select tag. Unfortunately nothing seems to be happening. The file remove.js is in public/js (so don't think that's the problem)
html:
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script type="text/javascript" src="/js/remove.js"></script>
<select name="rank1" size="1" id="select1" >
<option value="" selected disabled hidden>Rank</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>
<option value="6">6</option>
</select>
<select name="rank2" size="1" id="select2" >
<option value="" selected disabled hidden>Rank</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>
<option value="6">6</option>
</select>
<select name="rank3" size="1" id="select3" >
<option value="" selected disabled hidden>Rank</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>
<option value="6">6</option>
</select>
JavaScript remove.js:
$(document).ready(function(){
$("select").change(function(){
var selectedValue1 = $(this).val();
var selectedValue2 = $("select").not($(this)).val();
$(this).find("option[value!="+selectedValue2+"]").show();
$("select").not($(this)).find("option[value!="+selectedValue1+"]").show();
$("select").not($(this)).find("option[value="+selectedValue1+"]").hide();
});
});
Thank you in advance!
You failed to include JQuery.
Change this :
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
To :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
Change javascript write this
$(document).ready(function () {
var selected = 0
var prevSelected = 0;
$("select").change(function () {
prevSelected = selected;
selected = $(this).val();
$("select").not("#"+this.id).each(function(){
$("#"+this.id).find("[value=" + selected + "]").hide();
$("#"+this.id).find("[value=" + prevSelected + "]").show();
})
});
});
I think this might work your original code wasn't working as expected.
$(document).ready(function(){
var select1,select2,select3;
$("#select1").change(function(){
if(select1 > 0){
$("#select2").find("option[value="+select1+"]").removeAttr('disabled');
$("#select3").find("option[value="+select1+"]").removeAttr('disabled');
}
select1 = $(this).val();
$("#select2").find("option[value="+select1+"]").attr("disabled","disabled");
$("#select3").find("option[value="+select1+"]").attr("disabled","disabled");
});
$("#select2").change(function(){
if(select2 > 0){
$("#select1").find("option[value="+select2+"]").removeAttr('disabled');
$("#select3").find("option[value="+select2+"]").removeAttr('disabled');
}
select2 = $(this).val();
$("#select1").find("option[value="+select2+"]").attr("disabled","disabled");
$("#select3").find("option[value="+select2+"]").attr("disabled","disabled");
});
$("#select3").change(function(){
if(select3 > 0){
$("#select1").find("option[value="+select3+"]").removeAttr('disabled');
$("#select2").find("option[value="+select3+"]").removeAttr('disabled');
}
select3 = $(this).val();
$("#select1").find("option[value="+select3+"]").attr("disabled","disabled");
$("#select2").find("option[value="+select3+"]").attr("disabled","disabled");
});
});
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.
[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>
I want to make the contains of a second drop down menu dependent on what is selected in the the first. In my case wish to do it for a car selection option. i.e when the car make is selected this then populates the model drop down menu with the relevant models.
As there are a lot of makes of car I would like to keep it concise if possible I presume arrays of models for each make is the solution but how do implement this.
I have look at various solutions and cannot find a suitable answer to this, any suggestions/examples would be gratefully appreciated.
I am using jsp.
Make:<select>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
</select>
You could do it with some simple JS and css ( here is a JSFiddle: http://jsfiddle.net/N7Q57/1/)
Make:
<select name="cars" id="cars">
<option selected value="Choose">Choose</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Ford">Ford</option>
<option value="Toyota">Toyota</option>
</select>
<div id="brands">
<select class="audi">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="bmw">
<option value="3">3</option>
<option value="4">4</option>
</select>
</div
the jQuery
$("#cars").change(function () {
var string = "";
string = $("select#cars option:selected").text();
if (string == "Audi"){
$("#brands .bmw").hide();
$("#brands .audi").show();
$("#brands").show();
} else if (string == "BMW"){
$("#brands .audi").hide();
$("#brands .bmw").show();
$("#brands").show();
}
})
and the CSS:
#brands{
display: none;
}
Hello is there anyway to have a value selected by giving in a value?
<select name="color">
<option value="black">black</option>
<option value="white">white</option>
<option value="red">red</option>
</select>
For example if I want black to be selected I would set selected = black.
Rather than using <option value="black selected>black</option>
Thank you for assistance, please let me know if there is any misunderstanding.
If you are not averse to using js and jquery:
<select name="color" id="color">
<option value="black">black</option>
<option value="white">white</option>
<option value="red">red</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
$("#color").val("black");
});
</script>
If you want to work with multiple select options, you can use this:
$("#color").val(["black"]);
// for single select option
$("#color").val(["black","red","white"]);
// for multiple select options