I need help in using select multiple in Jquery using.
Here is my code in snippset
$(document).ready(function() {
$('.select2').select2();
});
function edit(){
var MC_Value = $("#MC_value").val();
$("#the_value").val(MC_Value);//I dont know to show the value I am newbie
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<input type="text" class="form-control" id="MC_value" value='"Adam","George","John"'>
<a href="javascript:void();" onclick="edit()" class="btn btn-primary form-control"><span class="glyphicon glyphicon-pencil">Edit</span>
</a>
<br>
<select type="text" class="form-control select2" id="the_value" name="the_value" multiple>
<option value="Adam">Adam</option>
<option value="George">George</option>
<option value="John">John</option>
</select>
I am upload the image to show how i want this code run. but i am new in php and jquery. need help.
Thanks master
Related
I have problem to set multiple values in the multiple select input. For example I need to set value 2,3 (Ketchup, Relish) in the multi-select input when I've clicked the Show Selected Option button, then the value will show in the input field.
Below is I want the expected result:
Below is my coding that I've tried, I've used this method $('.selectpicker').val(value); but it cannot work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<select class="selectpicker" value="" multiple data-live-search="true">
<option value="1">Mustard</option>
<option value="2">Ketchup</option>
<option value="3">Relish</option>
</select>
<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Selected Option</button>
<script>
$('select').selectpicker();
function sendFunc(){
var value = "2,3";
$('.selectpicker').val(value);
}
</script>
Hope someone can guide me on how to solve this problem. Thanks.
Please read the documentation for selecting items with programmatically with code. They have made it extremely clear on how to do this.
...From the docs linked above:
You can set the selected value by calling the val method on the element.
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);
Key think to notice here is that the values are an array, not a string.
Calling .val() directly like in your code works differently to the above - you should read on further on the docs page to understand the difference compared to .selectpicker('val').
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<select class="selectpicker" value="" multiple data-live-search="true">
<option value="1">Mustard</option>
<option value="2">Ketchup</option>
<option value="3">Relish</option>
</select>
<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Selected Option</button>
<script>
$('select').selectpicker();
function sendFunc(){
var value = [2,3];
$('.selectpicker').selectpicker('val',value);
}
</script>
I want to implement drop-down list with multiple group selection checkbox. There are a lot of options,so I use mysql to save them. How could i get data from mysql to use as option.I want to use php to retrieve data and they must be hierarchical tree structure.
I use this sample code, but option value is directly entered. How to make it display herarchical form as image below.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-
typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/css/bootstrap-multiselect.css" />
</head>
<body>
<div class="container" style="width:400px;">
<form method="post" id="framework_form">
<div class="form-group">
<label>Select which Framework you have knowledge</label>
<select id="framework" name="framework[]" multiple class="form-control">
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
</div>
</form>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#framework').multiselect({
nonSelectedText: 'Thêm khách mời',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth: '400px'
});
});
</script>
Sorry for my bad English and Thanks for reading.
I am trying to get the selected drop down printerType to alert user when the printer type value is not selected but only when the user selects request the printertype box shows up. The issue I have is that it doesn't alert the user that it is not filled. The others work fine. I hope this is understanding may be little confusing. the JavaScript code is at the bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Systems Request</title>
<!--bootstrap-->
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="../Assets/javascript/html5shiv.min.js"></script>
<script src="../Assets/javascript/respond.min.js"></script>
<![endif]-->
<!--custom css-->
<link rel="stylesheet" type="text/css" media="all" href="Assets/css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="Assets/css/responsive.css">
<script src="Assets/Javascript/jquery-1.11.1.min.js" type=
"text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Assets/javascript/bootstrap.js"></script>
<script src="Assets/Javascript/textboxname_autocomplete.js" type=
"text/javascript"></script>
<style type="text/css">
.dropdown{
width: 292px;
height: 45px;
font-size: 16px;
margin-left: 30px;
margin-bottom: 10px;
background-color: pink;
}
</style>
</head>
<body style="background-image: url('../Systems/Assets/images/background.jpg')">
<?php include("includes/createHeader.php");?>
<section id="container">
<h2>Systems Request</h2>
<form name="systems" id="systems-form" action="Pages/InsertProcess.php" method="post"onsubmit="return formCheck(this);">
<div id="wrapping" class="clearfix">
<section id="aligned">
<label class="label">LanID</label><br><br>
<input type="text" name="lanId" id="lanId" autocomplete="off" tabindex="1" class="txtinput" >
<label class="label">Employee Name</label><br><br>
<input type="text" name="name" id="name" autocomplete="off" tabindex="1" class="txtinput">
<!--manager access db list info located in the includes folder-->
<label class="label">Manager</label><br><br>
<?php include("includes/accessDB_ManagerData.php");?>
<!--department dropdownlist located in the includes folder-->
<label class="label">Department</label><br><br>
<?php include("includes/departmentDropdownList.php");?>
<!--Request Issue list info located in the includes folder-->
<label class="label">Request Issue</label><br><br>
<!-- #start of Request Issues-->
*<select name ="request" id="request" onchange="if (this.selectedIndex==3){this.form['printerType'].style.visibility='visible'}else {this.form['printerType'].style.visibility='hidden'};">
<option value =""><?php echo ' Select Request Issue...'?></option>
<option value ="RESET CASE"><?php echo ' Reset Case'?></option>
<option value ="RESET WM PASSWORD"><?php echo " RESET WM PASSWORD"?></option>
<option value ="REPLACE TONER"><?php echo " REPLACE TONER"?></option>
<option value ="FIX PRINTER"><?php echo " FIX PRINTER"?></option>
<option value ="FIX DEVICES"><?php echo " FIX DEVICE"?></option>
<option value ="SAFETY HIGH REQUEST"><?php echo " SAFETY HIGH REQUEST"?></option>
<option value ="OTHER"><?php echo " OTHER"?></option>
</select><br>
<!-- #end of Request Issues-->*
***<select class="dropdown" style="visibility:hidden;" name="printerType" id="printerType" >
<option Value="">Please select Printer Type</option>
<option Value="FS 4200DN">Kyocera FS4200DN</option>
<option Value="FS 3040MFP">Kyocera FS3040MFP</option>
<option Value="Kyocera ">Kyocera FS1370DN </option>
<option Value="OKI MPS710C">OKI MPS710C</option>
<option Value="OKI MPS711C">OKI MPS711C</option>
<option Value="Sharp MX450N">Sharp MX450N</option>
</select>***
<br/>
<label class="label">Request Description </label><br><br>
<textarea name="request_comments" id="message" placeholder="Enter Description of Issue" tabindex="5" class="txtblock"></textarea>
<input type="submit" name="submit" id="submitbtn" class="btn btn-primary btn" tabindex="7" value="Submit">
<br style="clear:both;">
<?php #Hidden inputs for Status, tech comments, tech completed, tech completed date?>
<input name="status" type="hidden" value="RECEIVED">
<input name="comments" type="hidden" value="No Comment ">
<input name="compUser" type="hidden" value="Unassigned">
<input name="compDt" type="hidden" value="Not Completed">
</section>
</section>
</div>
</form>
</section>
<?php include("includes/footer.php");?>
<script src="Assets/Javascript/gen_validatorv4.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var frmvalidator = new Validator("systems");
if (document.getElementById('request').selectedIndex==3){
frmvalidator.addValidation("printerType","req","Please enter Printer Type");
}
else{
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
</script>
</body>
</html>
I had to change a few things like getElementbByName to getElementById. also added a function called updateValidation to add to the onchange part of the selected box and added frmvalidator.clearAllValidations();to the function along with added the two other textboxes lanId and request_comments to the if statement.
<select name ="request" id="request" onchange=" if (this.selectedIndex==3){this.form.printerType.style.visibility='visible'} else {this.form.printerType.style.visibility='hidden'};updateValidation()">
<script type="text/javascript">
function updateValidation (){
frmvalidator.clearAllValidations();
if (document.getElementById('request').selectedIndex==3){
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("printerType","req","Please enter Printer Type");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
else{
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
}
</script>
I'm trying to make a dynamic dropdown selection using this theme with Javascript. The <option> elements are taken from an array in a text file using AJAX and inserted in the <select> dropdown:
<head>
<script src="jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-border.css" />
</head>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "http://localhost/array.txt",
beforeSend: function(xhr) {
xhr.overrideMimeType("text/plain; charset=x-user-defined");
}
})
.done(function(data) {
var myArray = JSON.parse(data);
var output = [];
$.each(myArray, function(key, value)
{
output.push('<option value="' + value + '">'+ value +'</option>');
});
$('#myselect').html(output.join(''));
});
</script>
And here's the HTML part:
<body>
<form id="myform" action="select.php">
<input id="myinput" name="owncategory" type="text"> <br><br>
<div>
<select class="cs-select cs-skin-border" id="myselect">
<option value="" disabled selected>Select a category</option>
</select>
</div>
<div><input id="mysubmit" type="submit" value="Submit"></div>
</form>
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script>
(function() {
new SelectFx($(".cs-select").get(0));
})();
</script>
</body>
The problem is, the dropdown selection (which is now stylized by the script) doesn't show the added <option> elements, even though when the page is inspected on a browser, they're there. I don't know how to show them as part of the stylized dropdown. Any ideas?
EDIT: I just figured it out, kind of. So instead of inserting it on the select element with the #myselect id:
$('#myselect').html(output.join(''));
I inserted it on a <div> element that shows up when the page loads:
$('.cs-options').html(output.join(''));
And now I get this: http://i.imgur.com/KMEurVP.png
But now my current problem is that they're un-selectable.
Work for me.
<li data-option="" data-value="therock" class=""><span>The rock</span></li>
I want to change my data-subtext attribute of the options of my select element in runtime. But data-subtext does not get updated in selectpicker.
Here's my code:
$('.selectpicker').attr("data-subtext","new subtext").selectpicker('refresh');
That's because .selectpicker class stands for the select element itself not for it's options. Considering it can have more than one option you need to state which option's data-subtext you wish to change. refer to the following snippet:
$(document).ready(function() {
$('#myBtn').click(function() {
$(".selectpicker > option:eq(1)").data("subtext", "Look I'm changed");
$(".selectpicker").selectpicker('refresh');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option data-subtext="Mustard subtext">Mustard</option>
<option data-subtext="Ketchup subtext">Ketchup</option>
<option data-subtext="Relish subtext">Relish</option>
</select>
<a class="btn btn-default" id="myBtn">Update second options data-subtext</a>