I have a select box that uses jcf plugin. As documenation says we have to refresh method to change the value but it is not changing. Below here is what i have tried?
$(function() {
jcf.replaceAll();
});
function changeValue() {
$("#mgloc_npgpo").val('1')
jcf.getInstance($("#mgloc_npgpo")).refresh()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcf/1.2.3/js/jcf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcf/1.2.3/js/jcf.select.js"></script>
<div class="select-holder"><label>Selection</label>
<div class="select-wrap"><input type="hidden" id="mgloc_340b" value=""/>
<div class="select-wrap"><input type="hidden" id="mgloc_340b" value=""/>
<select id="mgloc_npgpo" multiple="multiple"
data-jcf="{"wrapNative": false, "wrapNativeOnMobile": false, "useCustomScroll": false, "multipleCompactStyle": true}" class="jcf-hidden">
<option value="" selected="selected">Select Non-Primary</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<div class="errorMsg hide"> </div>
</div>
<div class="errorMsg hide"> </div>
</div>
<button style="margin-top: 100px;" onClick="changeValue()">change value</button>
</div>
You have a typo
Your id name mgloc_npgpo not mgloc_ngpo
In your js code you have used mgloc_ngpoat every place. which should be mgloc_npgpo
$(function() {
jcf.replaceAll();
});
function changeValue() {
$("#mgloc_npgpo").val('1')
jcf.getInstance($("#mgloc_npgpo")).refresh()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcf/1.2.3/js/jcf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcf/1.2.3/js/jcf.select.js"></script>
<div class="select-holder"><label>Selection</label>
<div class="select-wrap"><input type="hidden" id="mgloc_340b" value=""/>
<select jcf id="mgloc_npgpo"
data-jcf="{"wrapNative": false, "wrapNativeOnMobile": false, "useCustomScroll": false, "multipleCompactStyle": true}" class="jcf-hidden">
<option value="" selected="selected">Select Non-Primary</option>
<option value="1" >value1</option>
<option value="2" >value2</option>
</select>
<div class="errorMsg hide"> </div>
</div>
<button onClick="changeValue()">change value</button>
</div>
Related
Using the bootstrap multi-select.js for selecting multiple options from the select box. I have tried, when i click on the button multiple options not selecting. below is my code:
// bootstrap multiselect box
$(document).ready(function() {
$('#ddlPermission').multiselect({
buttonWidth : '100%',
maxHeight : 100,
includeSelectAllOption : true,
dropRight : true
});
$(".clickbutton").click(function(){
$('.multiselect').val(['A','B']);
});
});
function myFunction() {
var allVal=$("#ddlPermission").val();
alert(allVal);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
</div>
</div>
<br>
<select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active" value="Submit">
</div>
You need to apply the selection to the dropdown's id instead of the class then refresh the multiselect.
$('#ddlPermission').val(['A','B']);
$('#ddlPermission').multiselect("refresh");
// bootstrap multiselect box
$(document).ready(function() {
$('#ddlPermission').multiselect({
buttonWidth : '100%',
maxHeight : 100,
includeSelectAllOption : true,
dropRight : true
});
$(".clickbutton").click(function(){
$('#ddlPermission').val(['A','B']);
$('#ddlPermission').multiselect("refresh");
});
});
function myFunction() {
var allVal=$("#ddlPermission").val();
alert(allVal);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
</div>
</div>
<br>
<select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active" value="Submit">
</div>
I have a form with few fields that should use drop down chosen. I have created a class on each select tag. This class is used to apply chosen on each element. I'm not getting any errors once a form is loaded but chosen doesn't work. Only what is displayed on the screen is this:
Chosen Image: https://i.stack.imgur.com/TQEK5.png
Here is my code:
<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout">
<fieldset>
<legend>Demographic</legend>
<div class="formItem">
<label for="city" class="required">City:</label>
<select name="city" id="city" class="chosen">
<option value="">Choose City</option>
<cfoutput query="getCity">
<option value="#cityNum#">#cityName#</option>
</cfoutput>
</select>
</div>
<div class="formItem">
<p align="center"><input type="button" name="chSubmit" id="chSubmit" value="Submit"></p>
</div>
</fieldset>
</form>
Here is JQuery:
$(document).ready(function() {
$('.chosen').each(function(){
$(this).chosen();
});
});
Should be your reference not set up properly, use the following:
Load CSS -> jQuery -> chosen
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
$(document).ready(function() {
$('.chosen').each(function() {
$(this).chosen();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout">
<fieldset>
<legend>Demographic</legend>
<div class="formItem">
<label for="city" class="required">City:</label>
<select name="city" id="city" class="chosen">
<option value="">Choose City</option>
<cfoutput query="getCity">
<option value="#cityNum#">#cityName#</option>
</cfoutput>
</select>
</div>
<div class="formItem">
<p align="center">
<input type="button" name="chSubmit" id="chSubmit" value="Submit">
</p>
</div>
</fieldset>
</form>
I built this code in order to show/hide div when an option is selected from the list but nothing happen when i click on an option.
My HTML :
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
My jQuery :
$(function() {
$('#row_dim').hide();
$('#type').change(function(){
if($('#type').val() == 'parcel') {
$('#row_dim').show();
} else {
$('#row_dim').hide();
}
});
});
if your code generate to dynamic than used to this $(document).on as like this
$(function() {
$('#row_dim').hide();
$(document).on('change', '#type', function(){
if($('#type').val() == 'parcel') {
$('#row_dim').show();
} else {
$('#row_dim').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
Add jquery library file
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="row">
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
<input type="text" name="length" class="dimension" placeholder="Length">
</div>
https://jsfiddle.net/9wLn265s/
I'm trying to include in the option, that if the user chooses/clicks the Other please specify option, he gets an option to give input. The characters thus input will instantly show relevant nationalities in a dropdown bar.
For a javascript function based solution for this, how can I make a call to that function in my html code or in dropdown. Thanks! :D
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
</div>
Check the below code
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code" />
</div>
Below is the full implementation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nationality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required="required">
<option></option>
<option value="" disabled="disabled" selected="selected">Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code">
</div>
<script>
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
</script>
</body>
</html>
Try this:
You need to have a listener for your select and take the action as per the selected value..
var inputLabel = $('#inputLabel');
var onOptionChange = function() {
if (this.value == 'other') {
inputLabel.fadeIn(100);
} else {
inputLabel.fadeOut(100);
}
};
$('#status').on('change', onOptionChange);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">Nationality</label>
<select name="status" id="status" required>
<option value="" disabled selected>Select your Nationality</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<label for="input" id="inputLabel" style="display: none">Other:
<input type="text" id="input">
</label>
</div>
The HTML:
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" class="1">Average Sold</option>
<option value="mma" class="1">Min|Max|Avg Sold</option>
<option value="oh" class="2">On Hand Qty</option>
<option value="mr" class="2">Money Report</option>
</select>
<div id='1' class='box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
The jQuery:
$(document).ready(function () {
$('#1').hide();
$('#sr').change(function () {
$('#'+$(this).val()).show();
});
});
I am trying to get this to function where when the avg or min, max, avg reports are selected in the select box, the DIV to enter the dates will become visible.
As of right now the page loads with the DIV hidden but it never become visible.
Thanks in advance.
You need to look at the accepted option, you can not use the value like you are doing.
$(document).ready(function () {
$('.region').hide();
$('#sr').change(function () {
$(".region").hide();
var region = $(this).find("option:selected").data("region");
$('#'+region).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" data-region="1">Average Sold</option>
<option value="mma" data-region="1">Min|Max|Avg Sold</option>
<option value="oh" data-region="2">On Hand Qty</option>
<option value="mr" data-region="2">Money Report</option>
</select>
<div id='1' class='region box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
<div id='2' class='region'>
2
</div>