I'm trying to hide a button until both select boxes have an item select.
<select id="comType">
<option>-- Select --</option>
<option>Call</option>
<option>Fax</option>
<option>Email</option>
</select>
<select id="comDirection">
<option>-- Select --</option>
<option>Incoming</option>
<option>Outgoing</option>
</select>
Next
What I'm currently using, but I know is not right.
<script>
$(document).ajaxSuccess(function () {
if ($("#comType").change()) || ($("#comDirection").change()))
{ $("#button_that_displays_only_when_both_selects_have_input").show()}
});
</script>
It would be an added bonus if this could ensure actual selection, as in, not allow the first select option to count as they are just placeholders....
Thanks,
Mark
// take both inputs and bind this function to the change event of both
$("#comType, #comDirection").on('change', function () {
// show the button if they both have a value
if ($("#comType").val().length > 0 && $("#comDirection").val().length > 0) {
$("#button_that_displays_only_when_both_selects_have_input").show();
}
});
As the condition is checking the value lengths, once you correctly set up your options it will only show the button when the selects have actual values selected.
i.e.
value's length is 0, button will not show:
<option value="">Placeholder</option>
value's length is 3, so the button will show (if the other side of the condition is also satisfied):
<option value="fax">Fax</option>
This solution interprets the first option ("-- Select --") as invalid, independent of it's and the other options textual content.
Tested with jQuery 1.8.1 and 2.0.3, with browsers Firefox 24.0/Linux, Opera 12.16/Linux, Chrome 29.0.1547.76/Linux.
<!DOCTYPE html>
<html>
<head>
<title>Option select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="PATH_TO_jQuery"></script>
<script type="text/javascript">
function bothSelectsAreValid() {
return $("#comType")[0].selectedIndex > 0 && $("#comDirection")[0].selectedIndex > 0;
}
function setButtonVisibility() {
if (bothSelectsAreValid())
$("#button_that_displays_only_when_both_selects_have_input").show();
else
$("#button_that_displays_only_when_both_selects_have_input").hide();
}
$(document).ready(function() {
$("#comType, #comDirection").on('change', function() {
setButtonVisibility();
});
setButtonVisibility(); // needed if browser presets the selected values on reload
});
</script>
<style type="text/css">
#button_that_displays_only_when_both_selects_have_input { display : none; }
</style>
</head>
<body>
<select id="comType">
<option selected="selected">-- Select --</option>
<option>Call</option>
<option>Fax</option>
<option>Email</option>
</select>
<select id="comDirection">
<option selected="selected">-- Select --</option>
<option>Incoming</option>
<option>Outgoing</option>
</select>
Next
</body>
</html>
Related
We have used bootstrap-multiselect.js for multiselect dropdown in application. We have the code for multiselect as $(".select-drp").multiselect(). Now on a condition, we have to change this multiselect dropdown to single dropdown through jquery. Please suggest a way to achieve changing multiselect dropdown to single dropdown. Thanks in advance.
If you can remove multiple attribute from select element, It would resolve your problem
If you can't, try below code but it will change all multiple select to single select, Modify as per your need
$('.multiple-select.one').multipleSelect();
let tempMultipleSelect = $.fn.multipleSelect;
$.fn.multipleSelect = function () {
this.removeAttr('multiple'); //remove attribute as per your logic
return tempMultipleSelect.apply(this, arguments);
}
$('.multiple-select.two').multipleSelect();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/multiple-select#1.5.2/dist/multiple-select.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/multiple-select#1.5.2/dist/multiple-select.min.css">
<label>Multiple</label>
<select class="multiple-select one" data-placeholder="Select" multiple>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
<hr>
<label>Multiple Changed As Single</label>
<select class="multiple-select two" multiple>
<option selected disabled>Select</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
There's a way to make the checkboxes behave like a radio button group and also have the ability to have every checkbox unchecked as well, see this section for more details. In the example, there's a button that toggles the multi-select form/to 'multiple' to/from 'single' selection behavior.
Details are commented in example
// Initialize plugin
$('.select').multiselect();
// Bind <form> to reset event
$('#interface').on('reset', multiSingle);
// Define status flag
let mode = 'multiple';
// Pass event object by default
function multiSingle(e) {
/*
Toggle reset button class, deselect any <option>s, and destroy the plugin
*/
$('.toggle').toggleClass('multiple, single');
$('.select').multiselect('deselectAll');
$('.select').multiselect('destroy');
/*
If mode is 'multiple'...
...initialize plugin...
...change checkbox behavior to that of a radio button group, with the
added benefit of unchecking the currently checked checkbox...
...then set mode to 'single'
*/
if (mode === 'multiple') {
$('.select').multiselect({
onChange: function(option, checked) {
let values = [];
$('.select option').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('.select').multiselect('deselect', values);
}
});
mode = 'single';
/*
Otherwise initialize plugin as it was originally and set mode to
'multiple'
*/
} else {
$('.select').multiselect();
mode = 'multiple';
}
}
.multiple::before {
content: 'Single'
}
.single::before {
content: 'Multiple'
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-4.5.2.min.css" rel="stylesheet" />
<link href="//davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet" />
</head>
<body>
<form id='interface' class='container'>
<fieldset class='row' style='display:flex'>
<div class='btn-grp' style='margin:20px 0 0 0'>
<select class="select" multiple="multiple">
<option value="cheese"> Cheese </option>
<option value="tomatoes"> Tomatoes </option>
<option value="mozzarella"> Mozzarella </option>
<option value="mushrooms"> Mushrooms </option>
<option value="pepperoni"> Pepperoni </option>
<option value="onions"> Onions </option>
</select>
<button class='btn btn-primary toggle multiple' type='reset'></button>
</div>
</fieldset>
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
<script src="//davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
I have 2 comboboxes, first for Province and second for city/town.
I just wanna get the value of my second combobox (city/town) after first combobox changed and second combobox will change with ajax after user chose first the combobox.
Here is my code, but the problem is that the alert shows up twice!
jQuery('#billing_state').on('change', function() {
jQuery('#billing_city').on('change', function() {
var state = jQuery(this).val();
alert(state);
});
});
Why you made an imbrication of event ? just use change on the first combo .
Here is an example :
state = {"1":["Rome","Milan","Parma"],"2":["Paris","Lile","Nice"],"3":["Algiers","Jijel","Bejaia"],"4":["London","Manchester"]}
$(document).ready(function(){
//this if you want that changing province this alert country value
$("#billing_state").on("change",function(e){
$("#billing_town").children().remove();
var city =state[$(this).val()];
if(!city) return;
$("#billing_town").append('<option value="">- Select -</option>')
for(i=0; i< city.length;i++) {
//console.log(city[i]);
$("#billing_town").append('<option value="'+city[i]+'">'+city[i]+'</option>');
}
});
// when changing country this alert country value itself
$("#billing_town").on("change",function(e){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Province :
<select id="billing_state">
<option value="">- select -</option>
<option value="1">Italy</option>
<option value="2">France</option>
<option value="3">Algeria</option>
<option value="4">UK</option>
</select>
<br><br>
Country :
<select id="billing_town">
</select>
is this what you want. try with demo below
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<label>Province</label>
<select id="province">
<option>california</option>
<option>austin</option>
<option>texas</option>
<option>colombo</option>
</select>
<hr>
<label>city</label>
<select id="city">
<option>colombo</option>
<option>canberra</option>
<option>silicon valley</option>
<option>ottawa</option>
</select>
</body>
<script type="text/javascript">
$("#province").on('change',function(){// in this line identify if there is any changes to first select box
var thevalue = $("#city").val(); // if there is any changes to first selection box, then at that time get the value of second selection box.
alert(thevalue); // to check the value of secod check box at the time chage put an alert.
});
</script>
</html>
or else if your want to show values according to user selection of first select box value, you can do it like this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<label>Province</label>
<select id="province">
<option>california</option>
<option>austin</option>
<option>ottawa</option>
<option>western</option>
</select>
<hr>
<label>City</label>
<select id="city">
<option>--select--</option>
</select>
</body>
<script type="text/javascript">
$("#province").on('change',function(){// in this line identify if there is any changes to first select box
var thevalue = $(this).val(); // if there is any changes to first selection box, then at that time get the
$("#city").text("");
//display values according to the first value
if (thevalue == "california")
{
var cities = ["sillicon valley","st pauls","new york"];
for(var i=0;i<cities.length;i++)
{
var createoption = $('<option>'+cities[i]+'</option>');
$("#city").append(createoption);
}
}
else if(thevalue="austin")
{
var cities = ["mirage","manhatten","las vegas"];
for(var i=0;i<cities.length;i++)
{
var createoption = $('<option>'+cities[i]+'</option>');
$("#city").append(createoption);
}
}
else
{
//like above you can add relevent values.
}
});
</script>
</html>
Html5 select element should:
Show account name and number in dropdown list.
If account is selected, only number should displayed in box
Number should stored in value on selection
I tried code below in Chrome.
After selecting 13111 Receiveables it shows 13111 Receiveables in input box.
How to fix this so that after selecting 13111 Receiveables only accont number
13111 is shown in field ?
Bootstrap 3 ,jquery, jquery-ui, ASP.NET MVC4 with Razor view engine are used.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Account number:
<select>
<option label='' value=''></option>
<option value='13111' label='13111 Receiveables'>13111</option>
</select>
</body>
</html>
I modified #arsho's code
I believe you were looking for this:
HTML:
<body>
<br> Account number:
<select id="account_select">
<option id="optId" label='' value=''></option>
<option value='13111' label='13111 Receiveables'>13111</option>
<option value='13112' label='13112 Receiveables'>13112</option>
<option value='13113' label='13113 Rssseceiveables'>13113</option>
</select>
</body>
JS:
$(document).ready(function() {
$("#account_select").on("change", function() {
$this_value = $(this).val();
$("#optId").text($this_value);
$("#optId").attr("selected",true);
});
});
hope it helps...
Change the HTML as:
<body>
<input placeholder="Account number will be shown upon selection" type="text" id="account_number" />
<br> Account number:
<select id="account_select">
<option label='' value=''></option>
<option value='13111' label='13111 Receiveables'>13111</option>
</select>
</body>
In jQuery add the following snippet:
$(document).ready(function() {
$("#account_select").on("change", function() {
$this_value = $(this).val();
$("#account_number").val($this_value);
});
});
See in live codedpen http://codepen.io/arsho/pen/GZErBL
My Setup:
I have a jquery script which is being used to filter what appears in the select boxes (this works fine).
For the filtered select boxes I also have a submit on click for each option in the select box
I believe the "on click submit" is breaking the filtering but i wish to keep the "on click submit" for ease of use.
Issue:
After I select an option from the list, the options from the other select boxes (geotrust and thawte) get filtered as expected but then after i select an option from the filtered list, the list is reset.
I would like it to remain filtered even after i make a selection - is it possible?
Unfortunately, it couldn't be replicated in jsfiddle as form submissions return an error so you need to save the files locally to test..
HTML
<!DOCTYPE html>
<html lang="en" class="cookie_used_false">
<head>
<meta charset="UTF-8">
<title>Product Comparison</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="script3.js"></script>
</head><body>
<form id="compare">
<select id="filter">
<option value="all">Show All</option>
<option value="dv">Show DV</option>
<option value="ov">Show OV</option>
</select>
<br />
<select id="geotrust" onchange="this.form.submit()">
<option value=""></option>
<option class="gt_dv">qssl</option>
<option class="gt_ov">tbizid</option>
<option class="tht_dv">ssl123</option>
<option class="tht_ov">sslweb</option>
</select>
<select id="thawte" onchange="this.form.submit()">
<option value=""></option>
<option class="gt_dv">qssl</option>
<option class="gt_ov">tbizid</option>
<option class="tht_dv">ssl123</option>
<option class="tht_ov">sslweb</option>
</select>
</form>
</body>
</html>
JQUERY
$.fn.optVisible = function(stateVal) {
var isBool = typeof stateVal === "boolean";
return this.each(function () {
var $this = $(this);
if (isBool) {
if (stateVal) $this.filter("span > option").unwrap();
else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
}
else {
$this.filter("span > option").toggleOptionVisibility(true);
$this.filter(":not(span > option)").toggleOptionVisibility(false);
}
});
}
jQuery( document ).ready( function(){
$("#filter").change(function(){
if ($("#filter option[value='all']").is(':selected')) {
alert('all');
$( "#geotrust option" ).optVisible( true );
$( "#thawte option" ).optVisible( true );
}
if ($("#filter option[value='dv']").is(':selected')) {
$("[class*='dv']").optVisible( true );
$("[class*='ov']").optVisible( false );
}
if ($("#filter option[value='ov']").is(':selected')) {
$("[class*='ov']").optVisible( true );
$("[class*='dv']").optVisible( false );
}
});
});
Selects are reset because there is a page reload after you choose from the filtered select. Remove submit event from onchange handlers and implement a button to submit a form once everything is selected. Or a desired workflow is different?
I want to remove the click event from select list and from jQuery date picker.
Say if a select box contains 3 values
(Select, Yes, No) No is selected when the form is loaded then the user must not be able to change it until a satisfying condition is met.
Once the condition is met also I want to restore the selection of any option.
<html>
<head>
<title> Javascript Test </title>
<script src="jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").data("isOn","Remove");
});
$(document).ready(function(){
$("#b1").click(function(){
var i=0;
//alert("hi");
if($(this).data("isOn")=="Add"){
alert($(this).data("isOn"));
$(this).data("isOn",'Remove');
$("#car").on('click');
//return false;
}
else if($(this).data("isOn")=="Remove"){
alert($(this).data("isOn"));
$("#car").off("click");
$(this).data("isOn",'Add');
//return false;
}
alert(i);
i++;
});
});
</script>
</head>
<body>
<select name="carlist" form="carform" id="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type = "button" value="Add/Remove" id="b1"/>
</body>
</html>