I have a set of three option boxes which I am trying to keep disabled until the previous box has chosen. I am trying to use the onchange event to fire some script which enables the following box and populates the options but cannot get it to work for some reason? #nap2 is the first combo box, #nap4 the following. The code works fine on a click event but I need it to happen after the user has selected an option....
HTML
<select id="nap2" class="napkeeComponent napkeeCombobox">
<option>Rider 1</option>
<option>Rider 2</option>
<option>Rider 3</option>
<option>Rider 4</option>
<option>Rider 5</option>
</select>
<select id="nap4" class="napkeeComponent napkeeCombobox" disabled>
<option>Bike1</option>
<option>Bike2</option>
<option>Bike3</option>
<option>Bike4</option>
<option>Bike5</option>
</select>
JS
$(document).ready(function(){
$("#nap2").onchange(function(event){
var element = document.getElementById("nap2");
var selected = element.options[element.selectedIndex].text;
if(selected == "Rider 1"){
$('#nap4').removeAttr('disabled');
}
else{
if((selected == "Rider 2")){
$('#nap4').removeAttr('disabled');
}
}
event.stopPropagation();
event.preventDefault();
});
});
There is no onchange event instead there is .on('change' or .change. so use either of one as below:
$("#nap2").on('change',function(event){
var element = document.getElementById("nap2");
var selected = element.options[element.selectedIndex].text;
if(selected == "Rider 1"){
$('#nap4').removeAttr('disabled');
}
else{
if((selected == "Rider 2")){
$('#nap4').removeAttr('disabled');
}
}
event.stopPropagation();
event.preventDefault();
});
DEMO
More simplified version:
$("#nap2").on('change',function(event){
var selected = $(this).find('option:selected').text() //get selected text
if(selected == "Rider 1" || selected =="Rider 2"){ //have a single condition with or
$('#nap4').removeAttr('disabled');
}
else
$('#nap4').attr('disabled',true); //In case you want to disable it again if different option is selected
});
DEMO +
Related
I have a simple selection dropdown that looks like this:
Criteria: <select name="criteriaon" id="criteriaon" onchange ="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
and a javascript that will pop up a confirmation box only if the user chooses OFF.
<script>
function myfunction(){
if (this.value === '0'){
confirm("Are you sure you want to turn off?");
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
</script>
Right now what happens is that the selection will remain as OFF regardless of the user chose Yes or No. Is there a way to reset the selection to ON if the user chooses "No" on the pop-up confirmation box? Thanks in advance.
this way
ps: remove
--> onchange ="myfunction(this.form)"
because you are already using :
document.getElementById('criteriaon').addEventListener('change', myfunction);
document.getElementById('criteriaon').addEventListener('change', myfunction);
function myfunction() {
if (this.value === '0') {
if (!confirm("Are you sure you want to turn off?") ) {
this.value = '1'
}
}
}
Criteria:
<select name="criteriaon" id="criteriaon" >
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
You can simply set the value of select to 1 by doing this.
this.value = '1';
function myfunction(){
if (this.value === '0'){
const result = confirm("Are you sure you want to turn off?");
if (!result) {
this.value = '1';
}
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
Criteria: <select name="criteriaon" id="criteriaon" onchange="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
I have a form with two identical select lists like follows:
<select id="system" name="system[1][1]">
Option 1
Option 2
Option 3
</select>
<select id="system" name="system[1][2]">
Option 1
Option 2
Option 3
</select>
I want the user select either one of this select option2. If user choose option2 in first select then hide the option2 in second select and vice versa.
Example:
var select1 = document.querySelector('[name="system[1][1]"]');
var select2 = document.querySelector('[name="system[1][2]"]');
if (select1.value == '2') {
$('select[name="system[1][2]"] option[value="2"]').hide();
$('select[name="system[1][1]"] option[value="2"]').show();
} else if (select2.value == '2') {
$('select[name="system[1][2]"] option[value="2"]').show();
$('select[name="system[1][1]"] option[value="2"]').hide();
}
Which I think is bit of messy. Is it any elegant way that I can achieve this in Javascript or Jquery?
Thanks
Try following code :
<select id="system" name="system[1][1]">
<option value="optioin-1">Option 1</option>
<option value="option-2">Option 2</option>
</select>
<select id="system" name="system[1][2]">
<option value="optioin-1">Option 1</option>
<option value="option-2">Option 2</option>
</select>
jQuery :
jQuery('select').change(function(e){
var value = $(this).val();
var selectboxId = $(this).attr('name');
jQuery('select option').show();
if(selectboxId == 'system[1][1]') {
jQuery('select[name="system[1][2]"]').find('option[value="'+value+'"]').hide();
} else if(selectboxId == 'system[1][2]') {
jQuery('select[name="system[1][1]"]').find('option[value="'+value+'"]').hide();
}
});
Try this Check out this fiddle
I hope this is what ur looking for ?
Html
<select id="system1" name="system[1][1]">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="system2" name="system[1][2]">
<option value="1">1</option>
<option value="2">2</option>
</select>
Jquery
$(document).ready(function(){
$('select').change(function(){
var select1 = document.querySelector('[name="system[1][1]"]');
var select2 = document.querySelector('[name="system[1][2]"]');
if (select1.value == '2') {
$('select[name="system[1][2]"] option[value="2"]').hide();
$('select[name="system[1][1]"] option[value="2"]').show();
} else if (select2.value == '2') {
$('select[name="system[1][2]"] option[value="2"]').show();
$('select[name="system[1][1]"] option[value="2"]').hide();
} else if (select1.value == '1') {
$('select[name="system[1][2]"] option[value="2"]').show();
$('select[name="system[1][1]"] option[value="2"]').hide();
} else if (select2.value == '1') {
$('select[name="system[1][2]"] option[value="2"]').show();
$('select[name="system[1][1]"] option[value="2"]').hide();
}
});
});
I'd suggest the following approach (note the change of id properties, this is not optional, it's required in order to have valid HTML):
// cache the relevant <select> elements, here we use
// a CSS attribute-selector to get those <select>
// elements whose id attribute begins with 'system':
var selectElements = $('select[id^=system]');
// binding the anonymous function as the event-handler
// for the 'change' event, using the on() method:
selectElements.on('change', function() {
// we retrieve the index of the selected option from
// the changed <select> element:
var chosen = this.selectedIndex;
// we hide all the previously-selected <select> elements:
selectElements.hide()
// we find the <select> element at the same index as
// the chosen <option>:
.eq(chosen)
// and then show that element:
.show();
})
/* This is just to give a visual cue to
show which of the elements is currently
visible on the page: */
#system1 {
box-shadow: 0 0 1em fuchsia;
}
#system2 {
box-shadow: 0 0 1em limegreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="system1" name="system[1][1]">
<option>Option 1</option>
<option>Option 2</option>
</select>
<select id="system2" name="system[1][2]">
<option>Option 1</option>
<option>Option 2</option>
</select>
JS Fiddle demo.
References:
CSS:
Attribute selectors.
JavaScript:
HTMLSelectElement.selectedIndex.
jQuery:
on().
although there are some answers, here's what i came up with:
$("select").on("change", function() { //on any change event in all selects
var currentSelection = $(this); //save the used select box
//then take all selects, except the activated one, take the 'option' childs and iterate through them
$("select").not(currentSelection).find("option").each(function() {
if ($(this).val() == currentSelection.val()) //if option value = chosen value
$(this).hide(); //hide it
else //if not
$(this).show(); //show it (to reshow already hidden elements)
});
});
this works with endless options! but as soon, as you have more then 2 selects, you have to rework the 'show' part of this script...
here's a working fiddle: https://jsfiddle.net/usksL955/1/
I have HTML:
<select class="form" id="select" name="select">
<option>number1</option>
<option>number2</option>
</select>
<select name="organisation" class="form" id="cent" required>
<option value="1">UK</option>
<option value="2">SPAIN</option>
</select>
And another <select>:
<select class="form" id="ssip" name="organisation">
<option value="47" >US</option>
<option value="48">UKRAINE</option>
</select>
JQuery to show on 1 - first select on 2 - second
$(document).ready(function() {
$("#select").each(function () {
if (this.value == "1") {
$('#cent').show();
$('#ssip').hide();
}
if (this.value == "2") {
$('#cent').hide();
$('#ssip').show();
}
});
});
The problem is that when i choose option number1 appears first select with values 1 and 2 but when i select UK with value 1 and click submit it's sending value 47 , of second select's first option..
Try disabling the opposite select when toggling the selects. A control on a form will still be submitted if its display is set to none, however if the control is disabled it will not be submitted with the form.
$(document).ready(function() {
$("select").change(function () {
if (this.value == "number1") {
$('#cent').show().prop("disabled", false);
$('#ssip').hide().prop("disabled", true);
}
if (this.value == "number2") {
$('#cent').hide().prop("disabled", true);
$('#ssip').show().prop("disabled", false);
}
});
});
JS Fiddle: http://jsfiddle.net/bTJsH/
You are trying to loop one select box..
$("#select").each(function () {
There can be only one element with id "select". You should check like:
if ($("#select").value() == "1") { ..
And you don't even have values in your first select options..
i might suggest something like this
$('#select').on('change', function() {
var selected = this.selectedIndex;
$('.orgs').hide();
switch(selected) {
case 1:
$('#ssip').show();
break;
case 2:
$('#cent').show();
break;
}
});
here is an working example http://jsfiddle.net/pixelchemist/7ZGwy/
I have a validator function looping through to check and see if all inputs have been filled out, but I also need to check if the dropdown's have been selected as well. I would like to write that into the same function.
function validateSave (){
// reset status
var good = true
$('.errormessage-left').removeClass('active-left')
$('input').removeClass("warning")
$('input').each(function(){
if ($(this).val() == "") {
console.log("found an empty");
good = false
$(this).addClass("warning")
$('.errormessage-left').addClass('active-left'),
$('.modal').addClass('modal-active');
}
})
console.log(good)
return good
}
What's the best way to go about this?
You can use val() on a dropdown (<select> element) just like an input element, so just include it in your selector
$('input, select').each(function(){
You can do this :
Assuming the first element is :"please choose..."
if ($(".myDDL").get(0).selectedIndex>0)...
or
if ($(".myDDL").prop('selectedIndex')>0)...
Try this:
$('input').each(function(){
if($(this).prop('selected') == true){
// selected item
}
});
Assuming your HTML looks something like this:
<input type="text" name="whatever">
<select>
<option value="">Choose One...</option>
<option value="choice1">Choice 1</option>
<option value="choice2">Choice 2</option>
<option value="choice3">Choice 3</option>
</select>
Then your jQuery can figure it out like this
$('input, select').each(function(){
if($(this).val() == ''){
alert('Cannot be blank!');
}
else{
//proceed
}
}
you should be able to add this to your loop:
if ($(this).prop('type')=='select-one'){
if ($(this).prop('selectedIndex')==0){
console.log("found an empty");
good = false
$(this).addClass("warning")
$('.errormessage-left').addClass('active-left'),
$('.modal').addClass('modal-active');
}
}
I'm trying to apply a show/hide jQuery function to a html drop down box. I want to be able to hide one option and show another when an option from the drop down is selected. This jQuery works with a normal button but not the drop down.
<select style="margin-left:30px;">
<option value="" selected="selected">Please select a region</option>
<option id="uk_btn" value="1">UK</option>
<option id="usa_btn" value="2">USA</option>
</select>
<script>
$("#usa_btn").click(function(){
$("#usa_tbl").show();
$("#uk_tbl").hide();
});
</script>
<script>
$("#uk_btn").click(function(){
$("#uk_tbl").show();
$("#usa_tbl").hide();
});
</script>
You need to put the event for the select box like
$('select').change(function(){
var val = $(this + 'option:selected').attr('id');
if(val == 'uk_btn') {
$("#usa_tbl").hide();
$("#uk_tbl").show();
} elseif(val == 'usa_btn') {
$("#uk_tbl").hide();
$("#usa_tbl").show();
}
});
You can also check using value of the check box like
var val = $(this).val();
if(val == '1') {
$("#usa_tbl").hide();
$("#uk_tbl").show();
} elseif (val == '2') {
$("#uk_tbl").hide();
$("#usa_tbl").show();
}
You can do this:
// Cache the elements first
var $usa_tbl = $("#usa_tbl");
var $uk_tbl = $("#uk_tbl");
// Add a change event handler for the select element
$("#select_ID").change(function () {
if (this.value === '2') {
$usa_tbl.show();
$uk_tbl.hide();
} else if (this.value === '1') {
$uk_tbl.show();
$usa_tbl.hide();
} else {
$uk_tbl.hide();
$usa_tbl.hide();
}
});
where, select_ID is the ID of the select element.
Fiddle Demo
if you have no id on select then you can try
$('select').change(function(){
var val = $(this ).val();
if(val == 2) {
$("#usa_tbl").show();
$("#uk_tbl").hide();
} else {
$("#uk_tbl").show();
$("#usa_tbl").hide();
}
});
or you can do by id
<select id="select_id" style="margin-left:30px;">
now
$('#select_id').change(function(){
....same as previous
});
Root cause: There is no id matching for select in your js.
<select style="margin-left:30px;"> //id attribute is missing
instead use change event handler
<select style="margin-left:30px;" id="usa_btn">
JS:
$("#usa_btn").change(function(){
alert($(this).val()); // to get the value of selected option based on it
// add your condition
$("#usa_tbl").show();
$("#uk_tbl").hide();
});
<select id="country" style="margin-left:30px;">
then
$("#country").change(function(){
$('[id$="_tbl"]').hide();
$('#' + this.value.replace('_btn', '_tbl')) .show()
});