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>
Related
The goal is to reset the value of a dropdown list by pressing a button. Using vanilla javascript and html the following code works fine:
HTML/JS:
button = document.getElementById('button')
button.addEventListener('click', e => {
console.log('executed')
document.getElementById('sel').value = 'bike'
})
<select id="sel">
<option value="car">1</option>
<option value="bike">2</option>
<option value="cycle">3</option>
</select>
<button id="button">Test</button>
As expected, when the button is pressed, the value "2" is listed in the dropdown list. However, as soon as I add materialize CSS to my HTML, the value in the dropdown list is unchanged when I click the button. I know the event listener is triggered because "executed" is displayed in the console whenever I press the button. However, the value in the dropdown menu does not change like it did before in the vanilla javascript/html. How could this happen and what can I do to troubleshoot this to find the source?
HTML/JS with materialize CSS:
$(document).ready(function() {
// Initialize materialize data picker
$('.datepicker').datepicker({
'format': 'yyyy-mm-dd'
});
$('select').formSelect();
});
button = document.getElementById('button')
button.addEventListener('click', e => {
console.log('executed')
document.getElementById('sel').value = 'bike'
})
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
</head>
<body>
<select id="sel">
<option value="car">1</option>
<option value="bike">2</option>
<option value="cycle">3</option>
</select>
<button id="button" type="button" class="bold waves-effect waves light btn-large teal lighten-2">Test</button>
</body>
</html>
Thank you to whoever provided the edit to make this executable. After playing with this a little more I noticed that after pressing the button, if you click on the dropdown menu again the value automatically changes to "2" before you even select another option.
You could reinitialize the plugin in your eventListener after the update of the select element.
In addition to my code, you should outsource the initialization to a function in order to stay DRY.
$(document).ready(function() {
// Initialize materialize data picker
$('.datepicker').datepicker({
'format': 'yyyy-mm-dd'
});
$('select').formSelect();
});
button = document.getElementById('button')
button.addEventListener('click', e => {
console.log('executed')
document.getElementById('sel').value = 'bike'
$('.datepicker').datepicker({
'format': 'yyyy-mm-dd'
});
$('select').formSelect();
})
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
</head>
<body>
<select id="sel">
<option value="car">1</option>
<option value="bike">2</option>
<option value="cycle">3</option>
</select>
<button id="button" type="button" class="bold waves-effect waves light btn-large teal lighten-2">Test</button>
</body>
</html>
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 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
<html>
<head>
<title>Multi-select</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
</head>
<body>
<select id="example" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script>
$('#example').multiselect({
buttonClass: "btn btn-default",
buttonWidth: "140px",
});
</script>
</body>
</html>
this is my code...i have to print selected values from dropdownlist...how can i use jquery...if i select 1,2,3 options it will print that values
You can use .val() along with select element selector:
When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), it returns an array containing the value of each selected option, or null if no options are selected.
$('#example').val();
You can convert this array to CSV using .join().
$( "#myselect option:selected" ).text();
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>