I just want to hide a button defaultly and when i select any dropdown list the button comes
FIDDLE HERE
$(function() {
$('#cashbill').change(function() {
$('#bill_icon').hide();
$('#bill_icon' + $(this).val()).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
<label class="col-sm-12 control-label p-sm-0">Bill type :</label>
<select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
</div>
<div class="form-group cash-billbtn">
<label class="col-sm-12 control-label p-sm-0"></label>
<button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>
to shown.. i just tried jQuery but its not work for me..
Just hide the button at first , then check if no value select to hide or show ( using value length as below )
$(this).val().length ? $('#bill_icon').show() : $('#bill_icon').hide();
see below snippet
$(function() {
$('#bill_icon').hide();
$('#cashbill').change(function() {
$(this).val().length ? $('#bill_icon').show() : $('#bill_icon').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
<label class="col-sm-12 control-label p-sm-0">Bill type :</label>
<select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
</div>
<div class="form-group cash-billbtn">
<label class="col-sm-12 control-label p-sm-0"></label>
<button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>
if you want to check by text value not value use the beow snippet :
$(function() {
$('#bill_icon').hide();
$('#cashbill').change(function() {
var text = $(this).children("option:selected").text();
( text == "Raw" || text == "Spare" )? $('#bill_icon').show() : $('#bill_icon').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
<label class="col-sm-12 control-label p-sm-0">Bill type :</label>
<select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
</div>
<div class="form-group cash-billbtn">
<label class="col-sm-12 control-label p-sm-0"></label>
<button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>
This could be done this way in jQuery:
$(function() {
$('#bill_icon').hide();
$('#cashbill').change(function() {
if (this.value) $('#bill_icon').show();
else $('#bill_icon').hide();
});
});
But this has some problems:
- If your page delays to load, it will show the button, and then it will hide it (flashing items)
- This depends on JS been enabled
What I suggest you, is to hide the button on css, and then control its visibility.
What I do when I want this kind of behavior:
<label>Bill type :</label>
<select name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
<button type="button">Bill</button>
Hide by default on CSS, and only show it when select has a valid option:
select:invalid + button {
display: none;
}
select:valid + button {
display: inline-block;
}
Another way is using jQuery's toggleClass:
Add hidden class to the button, it will hide the button at first load.
Use toggleClass inside change event of select like this:
$('#cashbill').change(function() {
$('#bill_icon').toggleClass('hidden', $(this).val() === '');
});
Basically you prevent toggling class when selected item is not first item.
Here is working fiddle.
add css above like here.
.bill-btn{
display: none;
}
change your jquery like this.
$(function() {
$('#cashbill').change(function() {
if($(this).val() != "others"){
$('#bill_icon').hide();
$('#bill_icon' + $(this).val()).show();
$(".bill-btn").show(); // added this line here
}
});
});
Related
I am building a search result filtering feature. I have a number of select2 dropdown boxes where the user can select multiple values from to either hide or show divs with matching class values. I have a number of divs with classes containing values matching values in the select2 dropdown boxes. How do I go about coding this functionality?
I can only get this to work for one selection, I'd like to be able to select multiple options from the dropdowns.
$('select.filterCandidates').bind('change', function() {
$('select.filterCandidates').attr('disabled', 'disabled');
$('#candidates').find('.row').hide();
var critriaAttribute = '';
$('select.filterCandidates').each(function() {
if ($(this).val() != '0') {
critriaAttribute += '[data-' + $(this).data('attribute') + '*="' + $(this).val() + '"]';
}
});
$('#candidates').find('.row' + critriaAttribute).show();
$('#filterCount').html('Showing ' + $('div#candidates div.row:visible').length + ' Matches');
$('select.filterCandidates').removeAttr('disabled');
});
$('#reset-filters').on("click", function() {
$('#candidates').find('.row').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<br>
<h4>Search Form</h4>
<br>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="type" class="form-control filterCandidates" data-attribute="type">
<option value="0">Candidate Type</option>
<option value="CA">CA</option>
<option value="CFA">CFA</option>
<option value="CFO">CFO</option>
<option value="CIMA">CIMA</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="role" class="form-control filterCandidates" data-attribute="role">
<option value="0">Preferred Role</option>
<option value="Analyst">Analyst</option>
<option value="Associate">Associate</option>
<option value="CFO">CFO</option>
<option value="FD">FD</option>
<option value="FM">FM</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="roleType" class="form-control filterCandidates" data-attribute="roleType">
<option value="0">Preferred Role Type</option>
<option value="Permanent">Permanent</option>
<option value="Contract/Interim">Contract/Interim</option>
<option value="Internship">Internship</option>
</select>
</div>
</div>
</div>
just to give you a rough idea as you have not provided any code.
<script>
var SelectedValues = $('#ddlSelect option:selected');
var NotSelectedValues $('#ddlSelect option:not(:selected)');
$(SelectedValues ).each(function () {
$("."+$(this).val()+"").show(); //show all those divs containing
//this class
});
$(NotSelectedValues ).each(function () {
$("."+$(this).val()+"").hide();//hide all those divs containing
//this class
});
</script>
This is a rough idea , The above script will show all of the divs containing the classes you have selected in your select2 with id "ddlSelect" and hide those which you have not selected.
you can put this into a function and call it on onchange event of ddlSelect or whatever and however you want it to.
I use selectize.js for dropdown lists in my project. I have 3 dropdown lists related to each other. When I click an option from first dropdown list, some elements from second and third dropdown lists should be disabled. When I click an option from second dropdown list, some elements from third dropdown list should be disabled.
When I try some basic jquery or javascript methods to disable an option from dropdownlists, they don't affect. However, when I delete selectize.js classes from dropdownlists, they immediately affect, disable options that I want.
Here is my sample code for dropdownlists;
<div id="pro_yur_gru" class="row form-row">
<div class="col-lg-4 col-md-4">
<label class="form-label">Person</label>
<select id="Person1" class="demo-default" name="PERSONLIST" onchange="my_onchange_function_to_remove_2_and_3()">
<option value="">Select a person...</option>
<option value="4">Albert</option>
<option value="1">Frank</option>
<option value="3">Doug</option>
<option value="5">Arnold</option>
</select>
<script type="text/javascript">
$('#Person1').selectize({
allowEmptyOption:true,
create: true,
dropdownParent: 'body'
});
</script>
</div>
</div>
<div id="pro_yur_gru2" class="row form-row">
<div class="col-lg-4 col-md-4">
<label class="form-label">Person 2</label>
<select id="Person2" class="demo-default" name="PERSONLIST2" onchange="my_onchange_function_to_remove_3()">
<option value="">Select a person...</option>
<option value="4">Thomas</option>
<option value="1">Mark</option>
<option value="3">Nicholas</option>
<option value="5">James</option>
<option value="6">Matt</option>
<option value="7">Kenny</option>
</select>
<script type="text/javascript">
$('#Person2').selectize({
allowEmptyOption:true,
create: true,
dropdownParent: 'body'
});
</script>
</div>
</div>
<div id="pro_yur_gru_3" class="row form-row">
<div class="col-lg-4 col-md-4">
<label class="form-label">Person3</label>
<select id="Person3" class="demo-default" name="PERSONLIST3">
<option value="">Select a person...</option>
<option value="1">Chuck</option>
<option value="3">Alex</option>
<option value="2">Donald</option>
<option value="5">John</option>
<option value="7">Dwayne</option>
<option value="6">Kevin</option>
<option value="4">Tim</option>
<option value="8">Patrick</option>
</select>
<script type="text/javascript">
$('#Person3').selectize({
allowEmptyOption:true,
create: true,
dropdownParent: 'body'
});
</script>
</div>
</div>
What I need is something like this;
to change <option value="4">Albert</option> to <option disabled value="4">Albert</option> by using a javascript function.
Edit: I use this project on IE10.
Disabled select options can also be achieved by overriding the render function.
$('#control').selectize({
render: {
option: function(item, escape) {
if (item.value === '') {
return '<div style="pointer-events: none; color: #aaa;">' + escape(item.label) + '</div>';
}
return '<div>' + escape(item.label) + '</div>';
}
}
});
Or uses plugin https://github.com/mondorobot/selectize-disable-options
I have the exact same question as this:
jQuery Hide / Show input when selected option is equal to
However, it doesn't work when you go to multiple select, when the specific option is selected it works, but when you select another option alongside it stops working.
The question again is this: I want to show a div(#showme) if option 4 was selected, and I want to to work even if option 3 & 4 were selected, so at any given time if option 4 was selected the div should show.
This is the Javascript & HTML I have so far: (please note that I have more than one select in this form)
$('select[multiple]').each(function() {
$(this).change(function() {
obj = '#' + $(this).attr('id') + '_desc';
if($(this).val() == "4") {
$(obj).parent().parent().parent().removeClass('hide');
$(obj).css('display','block');
}
else {
$(obj).parent().parent().parent().addClass('hide');
$(obj).css('display','none');
}
});
});
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="feedback_q1">Hello?</label>
<select class="form-control selectpicker show-tick" name="feedback_q1[]" id="feedback_q1" multiple="multiple" title="Choose...">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
</div>
<div class="row hide">
<div class="col-sm-12">
<div class="form-group">
<label for="feedback_q1_desc">desc <span class="glyphicon glyphicon-pencil"></span></label>
<textarea name="feedback_q1_desc" id="feedback_q1_desc" class="form-control" data-toggle="tooltip" data-placement="top" title="desc" rows="2"></textarea>
</div>
</div>
</div>
Thanks for the help
When multiple selections are made, $(this).val() will contain an array of the values. Iterate through them and check for '4'. If $(this).val() is null, then nothing has been selected.
The example below does exactly what you want, including the changes after our extensive exchange in the comments and chat, including your most recent request to handle values pre-selected when the document loads.
Additionally, you were missing the bootstrap JavaScript file, and the files you were already including were in the wrong order and wrong location. The example below includes all of the .js and .css files in the correct order and location.
HTML
<!-- These should be in head -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet" />
<!-- Body content -->
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="feedback_q1">Hello?</label>
<select class="form-control selectpicker show-tick" name="feedback_q1[]" id="feedback_q1" multiple="multiple" title="Choose...">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
</select>
</div>
</div>
</div>
<div class="row hide">
<div class="col-sm-12">
<div class="form-group">
<label for="feedback_q1_desc">desc <span class="glyphicon glyphicon-pencil"></span>
</label>
<textarea name="feedback_q1_desc" id="feedback_q1_desc" class="form-control" data-toggle="tooltip" data-placement="top" title="אנא פרט" rows="2"></textarea>
</div>
</div>
</div>
<!-- These should be at the end of <body> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
JavaScript
// Check a select for a specific value and show/hide div based on selection
// Select will come in as a jQuery object
function checkSelect(control) {
// Build selector for associated description field
var selector = '#' + control.attr('id') + '_desc';
// Handle scenario where nothing is selected
if (control.val() == null) {
$(selector).parent().parent().parent().addClass('hide');
$(selector).css('display', 'none');
return;
}
// Get array containing selected values
var vals = control.val();
// Handle scenario where something is selected
for (i = 0; i < vals.length; i++) {
if (control.val()[i] == "4") {
$(selector).parent().parent().parent().removeClass('hide');
$(selector).css('display', 'block');
return; // Stop checking as we know the value we want is selected
} else {
$(selector).parent().parent().parent().addClass('hide');
$(selector).css('display', 'none');
}
}
}
// This runs when the DOM is ready
$(function () {
// Bind selectpicker
$('.selectpicker').selectpicker();
// Iterate through all multiple selects
$('select[multiple]').each(function () {
// Check for pre-selected values when page first loads
checkSelect($(this));
// Bind to change event so that values are checked after something is changed
$(this).change(function () {
checkSelect($(this));
});
});
});
Demo (third version): http://jsfiddle.net/BenjaminRay/7ckp7epf/
<div class="form-group">
<select class="form-control selectpicker show-tick" name="Status" id="Status" multiple="multiple" title="Choose...">
#foreach (SelectListItem item in ViewBag.Status)
{
if (item.Selected == false)
{
<option value="#item.Value">#item.Text</option>
}
else
{
<option value="#item.Value" selected>#item.Text</option>
}
}
</select>
</div>
How do I retrieve the selected value from the dropdown list created within my form using the following bootstrap classes?
I am using Meteor 0.9.2 and mizzao:bootstrap-3
My HTML:
<template name="createpost">
<form class="form-horizontal" role="form" id="createpost">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="field">Field</label>
<div class="col-sm-10">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<input type="submit" value="post">
</form></template>
CLIENT.JS:
Template.createpost.events({
'submit form#createpost': function(e) {
e.preventDefault();
var insertpost = {
field: //CODE TO RETRIEVE THE VALUE OF THE SELECTED ITEM //
}
Meteor.call('insertPostData', insertpost);
} });
SEVER.JS:
Meteor.methods({
'insertPostData': function(insertpost){
return insertpost._id = AllPosts.insert(insertpost);
}
});
Template.createpost.events({
'submit form#createpost': function(e, tmpl) {
e.preventDefault();
var selectedOption = tmpl.find('.form-control :selected');
var insertpost = {
field: (selectedOption && selectedOption.text)
}
}
});
I figured it out. I have to give the select an id and then reference this id in the javascript. i used "someId' for this example. This works perfect. Thanks for your initial help though.
<template name="createpost">
<form class="form-horizontal" role="form" id="createpost">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="field">Field</label>
<div class="col-sm-10">
<select class="form-control" id="someId>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<input type="submit" value="post">
client.js:
Template.createpost.events({
'submit form#createpost': function(e, tmpl) {
e.preventDefault();
var insertpost = {
field: $( "#someId" ).val();
}
Meteor.call('insertPostData', insertpost);
} });
I have a jQuery that when you click on a select option it will show the next one, but you have to click, you cant just use the down arrow or "tab" to the next option. I am wondering what options do I have to make this work?
Here is my jQuery:
function typefunction()
{
var itemTypes = jQuery('#type');
var select = this.value;
itemTypes.change(function () {
if ($(this).val() == '1-Hand') {
$('.1-Hand').show();
$('.2-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.1-Hand').hide();
if ($(this).val() == '2-Hand') {
$('.2-Hand').show();
$('.1-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.2-Hand').hide();
if ($(this).val() == 'Armor') {
$('.Armor').show();
$('.2-Hand').hide();
$('.off').hide();
$('.1-Hand').hide();
}
else $('.Armor').hide();
if ($(this).val() == 'Off-Hand') {
$('.Off').show();
$('.2-Hand').hide();
$('.1-Hand').hide();
$('.Armor').hide();
}
else $('.Off').hide();
if ($(this).val() == '1-Hand') {
$('.one-hand-dps').show();
$('.item-armor').hide();
$('.two-hand-dps').hide();
}
else $('.one-hand-dps').hide();
if ($(this).val() == '2-Hand') {
$('.two-hand-dps').show();
$('.one-hand-dps').hide();
$('.item-armor').hide();
}
else $('.two-hand-dps').hide();
if ($(this).val() == 'Armor') {
$('.item-armor').show();
$('.one-hand-dps').hide();
$('.two-hand-dps').hide();
}
else $('.item-armor').hide();
});
}
And the HTML:
<div class="input-group item">
<span class="input-group-addon">Type</span>
<select id="type" name="type" class="form-control" onclick="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
</div>
<div class="input-group item">
<span class="1-Hand input-group-addon" style="display: none;">Sub-Type</span>
<select class="1-Hand form-control" name="sub[1]" style="display: none;">
<option value="All 1-Hand Item Types">All 1-Hand Item Types</option>
<option>Axe</option>
<option>Ceremonial Knife</option>
<option>Hand Crossbow</option>
<option>Dagger</option>
<option>Fist Weapon</option>
<option>Mace</option>
<option>Mighty Weapon</option>
<option>Spear</option>
<option>Sword</option>
<option>Wand</option>
</select>
</div>
<div class="input-group">
<span class="2-Hand input-group-addon" style="display: none; ">Sub-Type</span>
<select class="2-Hand form-control" name="sub[2]" style="display: none;">
<option>All 2-Hand Item Types</option>
<option>Two-Handed Axe</option>
<option>Bow</option>
<option>Diabo</option>
<option>Crossbow</option>
<option>Two-Handed Mace</option>
<option>Two-Handed Mighty Weapon</option>
<option>Polearm</option>
<option>Staff</option>
<option>Two-Handed Sword</option>
</select>
</div>
<div class="input-group">
<span class="Armor input-group-addon" style="display: none;">Sub-Type</span>
<select class="Armor form-control" name="sub[3]" style="display:none;">
<option>All Armor Item Types</option>
<option>Amulet</option>
<option>Belt</option>
<option>Boots</option>
<option>Bracers</option>
<option>Chest Armor</option>
<option>Cloak</option>
<option>Gloves</option>
<option>Helm</option>
<option>Pants</option>
<option>Mighty Belt</option>
<option>Ring</option>
<option>Shoulders</option>
<option>Spirit Stone</option>
<option>Voodoo Mask</option>
<option>Wizard Hat</option>
</select>
</div>
<div class="input-group">
<span class="Off input-group-addon" style="display: none;">Sub-Type</span>
<select class="Off form-control" name="sub[4]" style="display:none;">
<option>All Off-Hand Item Types</option>
<option>Mojo</option>
<option>Source</option>
<option>Quiver</option>
<option>Shield</option>
</select>
</div>
If you use onclick attribute in the select, then it stands to a reason that it requires a mouse click in order to work. Try using onchange for instance and keyboard usage should also work.
<select id="type" name="type" class="form-control" onchange="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
Also see this question, for more details about how to handle both clicks and keys immediately.