I am using multi-select picker. I want to automatically select options on ajax response.
I have data in this form
tuesday,wednesday,Thursday
here is a select picker
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
<option value="monday" >Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday" >Wednesday</option>
<option value="thursday" >Thursday</option>
<option value="friday">Friday</option>
<option value="saturday" >Saturday</option>
<option value="sunday" >Sunday</option>
</select>
this is the variable which is having data
var operation_day = editData.attr('data-operation_day');
How i can automatically select those option which are in variable with help of jquery?
You can use .split(",") to convert them in array and then set value using selectpicker('val', operation_day.split(",")) lastly refresh your selectpicker.
Demo Code :
var operation_day = "tuesday,wednesday,thursday";
console.log(operation_day.split(","))
$('select').selectpicker('val', operation_day.split(",")); //split them and set value
$('select').selectpicker('refresh') //refresh ..selectpicker
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
You can pass the array for multiple selections like below.
var operation_day = "tuesday,wednesday,thursday" //editData.attr('data-operation_day');
var arr = operation_day.split(',');
$(".kt-selectpicker").val(arr)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
Note: It's case sensitive. thursday is not equal to Thursday.
Related
I have a dropdown of countries:
<select size="1" class="product-load-port" name="product-load-port">
<option value=""></option>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
</select>
How to select the value of the chosen country, ex. if Albania was chosen, value should be "AL"?
I'm trying to do that with
$('select.product-load-port').select2('data')[0].text;
but it gives me "Albania" as a value.
You can do that by simply accessing the .val() of the underlying native <select> element:
$('select.product-load-port').val()
You can also proxy it through .select2().val(), but that's not really necessary anyway:
$('select.product-load-port').select2().val()
$('select.product-load-port').select2();
$('#getSelectedValue').on('click', function() {
console.log($('select.product-load-port').val());
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>
<select size="1" class="product-load-port" name="product-load-port">
<option value=""></option>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
</select>
<button type="button" id="getSelectedValue">Log selected value to console</button>
I have a multiple select element and I would like to dynamically select a mixture of the options like so:
I am able to dynamically select one option but that's all,
document.getElementById('update_days_of_the_week').selectedIndex = 2;
document.getElementById('update_days_of_the_week').selectedIndex = 3;
<div class="row">
<div class="input-field col s4">
<select id="update_days_of_the_week" multiple>
<option value="" disabled selected>Choose your days of the week</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
<label>Days of the week</label>
</div>
</div>
The above code, obviously only selects index 3 as selectedIndex = 2 is replaced.
Using jQuery you could do something like this :
$('#update_days_of_the_week').val(['Monday', 'Friday'])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<select id="update_days_of_the_week" multiple>
<option value="" disabled selected>Choose your days of the week</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
Try using setAttribute() method instead selectedIndex which accepts only one value.
document.addEventListener('DOMContentLoaded', function(){
const instance = M.FormSelect.init(document.querySelector('select'))
});
const elSelect = document.getElementById('update_days_of_the_week')
/*
* With the disabled option in "elOptions"
*/
const elOptions = elSelect.querySelectorAll('option')
// Unselect the "Choose your days of the week" option
elOptions[0].removeAttribute('selected')
// Select the wanted options
elOptions[2].setAttribute('selected', 'selected') // Tuesday
elOptions[3].setAttribute('selected', 'selected') // Wednesday
/*
* Without the disabled option in "elOptions"
*/
// const elOptions = elSelect.querySelectorAll('option:not([disabled]')
// elOptions[1].setAttribute('selected', 'selected') // Tuesday
// elOptions[2].setAttribute('selected', 'selected') // Wednesday
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="row">
<div class="input-field col s4">
<form>
<label>Days of the week</label>
<select id="update_days_of_the_week" multiple>
<option value="" disabled selected>Choose your days of the week</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
</form>
</div>
</div>
i have select2 jquery plugin and i set it to multiple select option and i want to required this field if not any option select then not submit the form and give the message this field is required. why when field is empty and i click on submit button and alert not show. any helps.
code
jQuery(function($){
$('#example').select2({
placeholder: 'Select a month'
});
$(".add").click(function(e){
if (jQuery('#example').val() == '') {
alert('this feilds is required');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example" multiple="multiple" style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<div>
<button class="add">submit</button>
</div>
You are checking for '' which is a string space i believe where as #example give null as a default value.
Just check for null.
jQuery(function($){
$('#example').select2({
placeholder: 'Select a month'
});
$(".add").click(function(e){
if (jQuery('#example').val() == null) {
alert('this feilds is required');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example" multiple="multiple" style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<div>
<button class="add">submit</button>
</div>
Output is not my ideal thing.I wanna make drill down buttons.
Now output is
index.html is
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">
</head>
<body>
<select data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
</body>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
</script>
</html>
I wanna make only 2 drill down buttons in index.html .And if I select A in first button,a-1~4 is shown in second button.If I select B in first button,b-1~5 is shown in second button.If I select C in first button,c-1~2 is shown in second button・・・・.
So output now is different form my ideal one.I use Chosen in jQuery plugin. Why can't I do my ideal this? What is wrong? Why can't I filter to second button?
Hope this helps..
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">-->
</head>
<body>
<select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
<script type="text/javascript">
// $(".chzn-select").chosen();
// $(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(document).ready(function () {
$('#mainDD').on('change', function() {
console.log($(this).val());
console.log($('#mainDD :selected').text()) ;
var thisType = "type" + $(this).val();
for(i=1; i<5; i++) {
var thisId = "type" + i;
console.log(thisType + " " + thisId);
if(thisType !== thisId) {
$("#"+thisId).hide();
}
else {
$("#"+thisId).show();
}
}
})
});
</script>
</body>
</html>
I am trying to create a select box that shows all Twitter Bootstrap Icons with its text. Therefore I am using the Bootstrap-Select Plugin. One of the images shows up in the list, but the rest is somehow hidden.
What do I have to change in order to get the list of all listed icons with its text?
JS:
<script src="source/bootstrap_select/bootstrap-select.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.selectpicker').selectpicker('');
});
</script>
HTML:
<select class="selectpicker">
<option data-icon="icon-search">icon-search</option>
<option data-icon="icon-envelope">icon-envelope</option>
<option data-icon="icon-heart" selected="selected">icon-heart</option>
<option data-icon="icon-star">icon-star</option>
<option data-icon="icon-star-empty">icon-star-empty</option>
<option data-icon="icon-user">icon-user</option>
<option data-icon="icon-film">icon-film</option>
<option data-icon="icon-th-large">icon-th-large</option>
<option data-icon="icon-th">icon-th</option>
<option data-icon="icon-th-list">icon-th-list</option>
<option data-icon="icon-ok">icon-ok</option>
<option data-icon="icon-remove">icon-remove</option>
<option data-icon="icon-zoom-in">icon-zoom-in</option>
<option data-icon="icon-zoom-out">icon-zoom-out</option>
<option data-icon="icon-off">icon-off</option>
<option data-icon="icon-signal">icon-signal</option>
<option data-icon="icon-cog">icon-cog</option>
<option data-icon="icon-trash">icon-trash</option>
<option data-icon="icon-home">icon-home</option>
<option data-icon="icon-file">icon-file</option>
<option data-icon="icon-time">icon-time</option>
<option data-icon="icon-road">icon-road</option>
<option data-icon="icon-download-alt">icon-download-alt</option>
<option data-icon="icon-download">icon-download</option>
<option data-icon="icon-upload">icon-upload</option>
<option data-icon="icon-inbox">icon-inbox</option>
<option data-icon="icon-play-circle">icon-play-circle</option>
<option data-icon="icon-repeat">icon-repeat</option>
<option data-icon="icon-refresh">icon-refresh</option>
<option data-icon="icon-list-alt">icon-list-alt</option>
<option data-icon="icon-lock">icon-lock</option>
<option data-icon="icon-flag">icon-flag</option>
<option data-icon="icon-headphones">icon-headphones</option>
<option data-icon="icon-glass">icon-glass</option>
<option data-icon="icon-music">icon-music</option>
</select>
<link href="source/bootstrap_select/bootstrap-select.css" media="screen" rel="stylesheet" type="text/css" />
was missing!