I have two (or in some places more) dropdowns (select) with several options. There is also a button for clearing all selected values in dropdowns. There is one aspect of this clearing button that does not working properly for my needs.
The button is displayed only if dropdowns has selected option with value, after is selected options with empty value, button is hidden. After i choose some option in both dropdowns (button displayed) and then change value in one from this dropdowns to option without value (button is hidden). Problem is, that button is hidden after one from dropdowns has empty value.
I need that button to be hidden only if all dropdowns have a selected option with an empty value. This jsfiddle illustrates what I mean.
I use select2.js for the dropdowns.
HTML:
<input type="button" class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Javascript:
$('select').select2();
$('.option select').change(function() {
var id=$(this).val();
if (id=="") {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}
}).trigger('change');
$(".opt-clear").click(function() { $(".option select").select2("val", ""); });
You have to check the val from all lists. If at least one them has a value then dont hide the button. You have to use each() and a var as a flag.
Try:
$('.option select').change(function () {
var flag = 1;
$(".option select").each(function (index) {
var id = $(this).val();
if (id != "") {
flag = 0;
}
});
if (flag) {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}
}).trigger('change');
DEMO
Use this code your problem will be solved:
HTML Code :
<input type="button" id="btnChangeddValue" onclick="ddChangeValue();" style="display: none;"
class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select id="dd1" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="option">
<select id="dd2" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Js Script :
function ddChange(ddValue) {
if (ddValue != "" && ddValue != null) {
// $('#btnChangeddValue').css({ 'display': 'block' });
document.getElementById('btnChangeddValue').style.display = 'block';
}
else {
document.getElementById('btnChangeddValue').style.display = 'none';
}
}
function ddChangeValue() {
document.getElementById('dd1').value = "";
document.getElementById('dd2').value = "";
document.getElementById('btnChangeddValue').style.display = 'none';
}
Reguards,
Hardik Patel
hi I would try to get all the select with value. if their count is greater than 0 than button should be displayed. you can achieve that with jquery filter funstion
if ( $('.option select').filter(function(0 { return $(this).val != ''; }).length > 0){
//show button
}
else{
//hide button
}
Updated your fiddle.
$('.option select').change(function() {
checkvalue();
if(flag){
$('input').show();
}else{
$('input').hide();
}
}).trigger('change');
function checkvalue(){
$('.option select').each(function(){
if ($(this).val()!="") {
flag = true;
}else{
flag = false;
}
});
}
Your DOM has multiple select tags. So your code did not work.
Related
Tried to create an Others option in a drop down menu, which by doing so, activates a textbox to type in.
However, my current method of doing this causes the remaining options to be invisible when clicked, and the textbox does not appear when the Others option is clicked.
function disappear(val) {
var textbox = document.getElementById('issue');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
you are selecting the wrong element
var textbox=document.getElementById('textbox');
function disappear(val){
var textbox=document.getElementById('textbox');
if(val=='other'){
textbox.style.display='block';
}
else{
textbox.style.display='none';
}
}
#textbox{
width:90px;
height:60px;
background-color:red;
display:none;
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
that's how you must do it:
var textbox=document.getElementById('textbox');
You're really close! The only thing left is to change the id in the document.getElementById to the correct element and add the input field with the styling.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<input id="textbox" type="text" style="display: none;">
Should your textbox actually be a textarea element? Note: if it's meant to be a div it won't appear on the page (unless you style it) because its content is empty.
Use CSS to initialise the textbox display to none.
In the function you've picked up the select element with your query, and not the textbox element which is why the options are disappearing when you set the display to none. Maybe add an additional check to see if the style is set to block before you set the display to none.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
if (textbox.style.display === 'block') {
textbox.style.display = 'none';
}
}
}
#textbox { display: none; }
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<textarea id="textbox"></textarea>
I have a multiple select list in my HTML. If value 296 gets selected, all the other options must get unselected.
This is the code I am using so I don't have to use CTRL when I want to select multiple options:
$("#select").mousedown(function(e) {
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
if (select.value == 296) {
//unselect all the other options
}
e.target.selected = !e.target.selected;
setTimeout(function() {
select.scrollTop = scroll;
}, 0);
$(select).focus();
}).mousemove(function(e) {
e.preventDefault()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" name="adrestype_id" class="form-control" required="required" multiple="multiple">
<option value="296">Primairadres </option>
<option value="297">Bezoekadres </option>
<option value="298">Factuuradres </option>
<option value="299">Postadres </option>
</select>
I can't seem to figure out how I can unselect all the other options when value 296 is selected
The below seems to achieve what you state above. It does also stop you selecting the options if 296 is already selected as well.
const unselect = '296'
$('#select').change(function() {
const $el = $(this)
console.log($el.val())
if ($el.val().indexOf(unselect) !== -1) {
$el.children('option').each(function() {
$opt = $(this)
if ($opt.val() !== unselect) {
$opt.prop('selected', false)
}
});
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" name="adrestype_id" class="form-control" required="required" multiple="multiple">
<option value="296">Primairadres </option>
<option value="297">Bezoekadres </option>
<option value="298">Factuuradres </option>
<option value="299">Postadres </option>
</select>
I have dropdown select and options like this:
<div class="input-field">
<span class="icon-area"></span>
<select>
<option value="0">list 0</option>
<option value="1">list 2</option>
<option value="2">list 3</option>
</select>
and if list 0 is not selected I want to add css style it but my js code doesn't work
$("select").blur(function() {
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");
if(this.value){
$(this).parents(".input-field").addClass("form-border");
$(this).parents(".input-field").find(".icon-area").addClass("form-background");
return false;
}else{
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");
return false;
}
});
what is wrong ?
try replacing with this:
$("select").change(function() {
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");
if(this.value==0){
$(this).parents(".input-field").addClass("form-border");
$(this).parents(".input-field").find(".icon-area").addClass("form-background");
return false;
}else{
$(this).parents(".input-field").removeClass("form-border");
$(this).parents(".input-field").find(".icon-area").removeClass("form-background");
return false;
}
});
I have two select elements with some options. What I want to do is to handle this with jquery so as I can get the values of them only when options have values.
<div class="panel-heading">
<select id="loading-by-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
<select id="loading-by-sub-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
</div>
If I want to handle with one select element only I use .on('change', function() with select element and it works, but with multiple select element how can I do it.
You should check if selectedIndex is not 0 for all your select elements.
$(document).on('change', 'select', function () {
var allChanged = true;
// check if there is any other select element which was not changed
$('select').each(function () {
if (this.selectedIndex == 0) {
allChanged = false;
}
});
// if all select elements have been changed
if (allChanged) {
alert('BOTH CHANGED');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-heading">
<select id="loading-by-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
<select id="loading-by-sub-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
</div>
Just a side note, use .filter() :
$('select').change(function() {
var m = $(this).siblings('select').addBack();
var n = m.filter(function(){
return $(this).val() == null && $(this)
});
if ( !n.length ) alert('both selected')
});
DEMO
I have 2 <select> inputs. If I select an option in the first input, I want to filter the options by id based on the selected option of the first input.
I have defined id for each options in the second input ("prod"+id)
This is HTML:
<select id="provider" name="provider">
<option selected="selected" value="">--- Select providers ---</option>
<option value="1">Provider 1</option>
<option value="2">Provider 2</option>
<option value="3">Provider 3</option>
</select>
<select id="product" name="product">
<option id="" value="" selected="selected">--- Select products ---</option>
<option id="prod2" value="1">Product 1</option>
<option id="prod2" value="2">Product 2</option>
<option id="prod2" value="3">Product 3</option>
<option id="prod3" value="4">Product 4</option>
<option id="prod1" value="5">Product 5</option>
<option>
</select>
This is my jQuery code:
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#type').each(function(){
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
$('#prod1').val(filter);
})
})
})
I want to show products from the selected provider only.
Online Demo: http://jsfiddle.net/notfoundlife/BCedV/1/
Assuming your html above, I think this should work for you.
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#product option[value=' + filter +']').attr('selected', 'selected');
});
});
I think your issue is that you are not selecting the individual options, but the whole select list, so everything is hiding. Try changing the selector like this and go from there.
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#type option').each(function(){
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
})
})
})