JQuery show /hide div from drop down list change

JQuery show /hide div from drop down list change - javascript

I have three combobox that has each one should display and hide the respective div if selection is made.
<script type='text/javascript'>
$(document).ready(function(){
$ ("select.cascade").on("change", function() {
var which = this.id,
div = which + "d",
sel = $(this).val();
if (sel == '0') {
$("#" + div).hide();
} else {
$("#" + div).show();
}
// Call form.submit here if need be
});
});
</script>
Three dropdown list with div are given :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="c1" name="combobox" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<select id="c2" name="combobox1" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<select id="c3" name="combobox2" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<div style="display:block">default</div>
<div id="c1d" class="WalLDP" style="display:none">content1 </div>
<div id="c2d" class="AppliDP" style="display:none">content2 </div>
<div id="c3d" class="BBBDP" style="display:none">content3</div>
it is running on http://jsfiddle.net/ ..but if i save it in notepad as php or html file and run through wamp server it just showing the comboboxes but not showing divs...please solve this problem

you have to correct the url please
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
or
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
see in action JSFIDDLE

Are you connected to the internet? I tried testing it on jsfiddle and it works correctly
Because the code below needs internet connection.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
Here is the code I have on my laptop, just save it as a .html file. I hope this helps.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="c1" name="combobox" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<select id="c2" name="combobox1" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<select id="c3" name="combobox2" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<div style="display:block">default</div>
<div id="c1d" class="WalLDP" style="display:none">content1 </div>
<div id="c2d" class="AppliDP" style="display:none">content2 </div>
<div id="c3d" class="BBBDP" style="display:none">content3</div>
</body>
<script type='text/javascript'>
$(document).ready(function(){
$ ("select.cascade").on("change", function() {
var which = this.id,
div = which + "d",
sel = $(this).val();
if (sel == '0') {
$("#" + div).hide();
} else {
$("#" + div).show();
}
// Call form.submit here if need be
});
});
</script>
</html>

Related

how to limit selection if first option is chosen in select2

I am using Select2 and would like to allow users to select multiple options BUT NOT if the first option is selected.
The first option is "select later", and if this is chosen, no other items should be selectable. But if other options are selected, it should be possible to select multiple.
I can easily achieve selecting multipe, but how to limit further selection if the first option is selected?
$('#example').select2();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="example" multiple="multiple" style="width: 300px">
<option value="-1">Select later</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>

tracking the change and update the values accordingly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="example" multiple="multiple" style="width: 300px">
<option value="-1">Select later</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<script>
var $example = $('#example');
$example.select2();
$example.on("change", function() {
var vals = $(this).val();
if (vals.length > 1 && vals.includes("-1")) {
$(this).val("-1");
$(this).trigger('change');
}
})
</script>

You can use select2:opening event and check if the first item selected or not. If first item selected use preventDefault.
Working code here:
jsfiddle.net/xpvt214o/475246/

Something like this will do. If 'Select later' selected - rest of the items will be cleared.
$(function() {
$('#example').select2();
$('#example').on('select2:select', function(){
// if($(this).val()==null){$(this).trigger('change');}
if( $(this).val().indexOf('-1')!=-1 && $(this).val().length>1){
$(this).val('-1').trigger('change');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="example" multiple="multiple" style="width: 300px">
<option value="-1">Select later</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>

Disable 3th, 4th dropdown list if 1st or 2nr are selected

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>

Populate HTML select Tag with first input

Filling every inputs of a working hours form can be quite tedious.
Is there a way to populate every inputs from a form with the first entered value?
In the case of this Fiddle https://jsfiddle.net/az8ujh1e/1/, a first input on any of the opend date would populate the other ones (that could still be modified one by one)
and a first input on the closed dates would do the same on all the closing dates.
Code:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-6">Opend</div>
<div class="col-sm-6">Closed</div>
<form role="form" action="#" method="POST">
<div class="col-sm-6" id="timeopen1">
<select name="timeopen1" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed1">
<select name="timeclosed1" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen2">
<select name="timeopen2" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed2">
<select name="timeclosed2" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen3">
<select name="timeopen3" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed3">
<select name="timeclosed3" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen4">
<select name="timeopen4" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed4">
<select name="timeclosed4" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6"><br>
<button type="submit" class="btn btn-default" name="submit_time" >Submit</button>
</div>
</form>

I think the other answers are missing the point that he values should only be set automatically if the other values have not yet been set.
Add "timeopen" and "timeclosed" classes to your selectors like this:
<select name="timeopen1" class='selectpicker timeopen'>
Then the following script will change the other three values only if they are still set to "00:00".
$(function() {
$(".timeclosed, .timeopen").change(function() {
if ($(this).hasClass("timeopen")) {
autoSet(".timeopen", this);
} else {
autoSet(".timeclosed", this);
}
});
function autoSet(classSelector, t) {
if ($(classSelector + " option[value='00:00']:selected").length == 3) {
$(classSelector).val($(t).val());
}
}
});
This may cause a problem if three of them need to be set to "00:00", as it will then change the fourth one to "00:00" as well. So instead of checking the values, you may want to use global variables so that the autoSet only runs once for .timeopen and once for .timeclosed.
$(function() {
var autoSetTimeopen = true;
var autoSetTimeclosed = true;
$(".timeclosed, .timeopen").change(function() {
if ($(this).hasClass("timeopen") && autoSetTimeopen) {
autoSet(".timeopen", this);
autoSetTimeopen = false;
} else if ($(this).hasClass("timeclosed") && autoSetTimeclosed) {
autoSet(".timeclosed", this);
autoSetTimeclosed = false;
}
});
function autoSet(classSelector, t) {
if ($(classSelector + " option[value='00:00']:selected").length == 3) {
$(classSelector).val($(t).val());
}
}
});

If I correctly understood you want to display the value you selected in one field in all other fields from the same type. If so you just need to add a class "open" or "closed" to your select inputs and then proceed like this :
$('select').on('change', function() {
var value = $(this).val();
var className = 'open';
if( $(this).hasClass('closed') ) {
className = 'closed';
}
$('select.' + className).val(value);
});
Here is your Fiddle updated:
https://jsfiddle.net/az8ujh1e/2/

Here is a code which would do what you want, but it is not fully optimized right now. What I would do is, add ids to the select tags, so you can easily work with them with javascript or jquery.
$('#timeopen1 select').change(function(){
var opt = $(this).val()
for(i = 2; i<=4; i++){
$('#timeopen'+i.toString()+' select').val(opt);
}
});
$('#timeclosed1 select').change(function(){
var opt = $(this).val()
for(i = 2; i<=4; i++){
$('#timeclosed'+i.toString()+' select').val(opt);
}
});
EDIT:
Just as someone mentioned in another answer, add classes timeopen and timeclosed to your select elements, so we can easily work with them. Here is the updated code, to set all elements just the first time.
$('.selectpicker').one('change',function(event){
var opt = $(this).val()
if($(this).hasClass('timeopen'))
{
$('.timeopen').each(function(){
$(this).val(opt);
$(this).off('change');
});
}
else
{
$('.timeclosed').each(function(){
$(this).val(opt);
$(this).off('change');
});
}
});
https://jsfiddle.net/az8ujh1e/13/

How do you add an eventlistener to a select element

<!DOCTYPE html>
<html>
<head>
<title>NYC MTA</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>Line N</p>
Dropdown Button
<select id ="Select">
<option id="Select">Times Square</option>
<option id="34th">34th</option>
<option id="28th">28th</option>
<option id="23th">23th</option>
<option id="23th">Union Square</option>
<option id="8th">8th</option>
</select>
<select>
<option id="Times Square">Times Square</option>
<option id="34t">34th</option>
<option id="28t">28th</option>
<option id="23t">23th</option>
<option id="23t">Union Square</option>
<option id="8t">8th</option>
</select>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
<script>
window.onload= function(){
var lnListeners = function(){
var ln = document.getElementById("Select");
if(ln){
ln.addEventListener('change', function(){alert("Do great stuff")});
}
lnListeners();
}
};
</script>

id="Select" should only be in the <select> element, not the <option> element. IDs have to be unique.
And you need to call lnListeners outside the definition of the function.
window.onload = function() {
var lnListeners = function() {
var ln = document.getElementById("Select");
if (ln) {
ln.addEventListener('change', function() {
alert("Do great stuff")
});
}
};
lnListeners();
};
<select id="Select">
<option id="Times Square">Times Square</option>
<option id="34th">34th</option>
<option id="28th">28th</option>
<option id="23th">23th</option>
<option id="23th">Union Square</option>
<option id="8th">8th</option>
</select>

In your case, you just have to call the function lnListeners(), outside its scope.
var lnListeners = function(){
var ln = document.getElementById("Select");
if(ln){
ln.addEventListener('change', function(){alert("Do great stuff")});
}
}
lnListeners();
<select id ="Select">
<option id="Select">Times Square</option>
<option id="34th">34th</option>
<option id="28th">28th</option>
<option id="23th">23th</option>
<option id="23th">Union Square</option>
<option id="8th">8th</option>
</select>
<select>
<option id="Times Square">Times Square</option>
<option id="34t">34th</option>
<option id="28t">28th</option>
<option id="23t">23th</option>
<option id="23t">Union Square</option>
<option id="8t">8th</option>
</select>

How to select selected value from multiple option using javascript

I have multiple select topion.
And I need to show the selected values.with the data of '2,4,5;
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Can I use this code to get what I need.
<script type="javascript">
$(document).ready(function() {
var val_to_select = '2,4,5';
$( '#testID' ).val( val_to_select );
)};
</script>
I need output to be like this
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2" selected>test Value2</option>
<option value="3">test Value3</option>
<option value="4" selected>test Value4</option>
<option value="5" selected>test Value5</option>
<option value="6">test Value6</option>
</select>

you can pass the value in an array like this
$("#testID").val([1,2,3]);
JsFiddle

You can use this:
var data="1,2,4";
//Make an array
var dataarray=data.split(",");
// Set the value
$("#testID").val(dataarray);
// Then refresh
$("#testID").multiselect("refresh");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Also your code is not javascript but jquery.

Develop Reference

JavaScript is the programming language of the Web.

JQuery show /hide div from drop down list change - javascript

you have to correct the url please <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> or <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> see in action JSFIDDLE

Related

how to limit selection if first option is chosen in select2

Disable 3th, 4th dropdown list if 1st or 2nr are selected

Populate HTML select Tag with first input

How do you add an eventlistener to a select element

How to select selected value from multiple option using javascript

Categories

Resources