Develop Reference

Any option to select value in between 2 selected items in Selectzie.js in Mobile

I am using Selectize.js to an input to choose multiple options. The order of the selected value is important for me and I need an option to change the order of selected values or select a new option in between selected values.
But in mobile view, there seems no option to choose a value between 2 selected values. This works on a desktop by using only arrow keys in the keyboard.
There are plugins available such as remove_button and drag_drop, but both are helpless in my situation. drag_drop plugin is not yet working in the mobile. and remove_button only help to unselect a value.
Steps to reproduce:
On a form with the input of Selectize initialized.
Select 3 values from the drop-down
Try to add an option in between 2 and 3
Expected Result:
See a text cursor in the input in between the value 2 and 3 and display the drop-down option to choose. If we choose an option, it will add in between 2 and 3
Actual Result:
There we can't see any cursor while clicking in between 2 selected values, only we can click on the selected value which doesn't make any changes.
jsfiddle Link is here
var optionList = [{ "name": "radialis",
"id": "1"
},
{ "name": "Extensor",
"id": "2"
},
{ "name": "Median nerve",
"id": "3"
},
{ "name": "syndrome",
"id": "4"
},
{ "name": "carpi",
"id": "5"
},
{ "name": "longus",
"id": "6"
}];
$('#example').selectize({
openOnFocus: true,
options: optionList,
labelField: "name",
valueField: "id",
sortField: "name",
searchField: "name",
closeAfterSelect: false,
delimiter: ',',
persist: false,
maxItems: 15,
create: function(input) {
return {
value: input,
text: input
}
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/js/standalone/selectize.min.js"></script>
<div class="container-fluid">
<div class="form-group">
<label for="exampleInputPassword1">Selectize.js</label>
<input type="text" class="" id="example" value="3,4,1">
</div>
</div>

How to modify array with checkbox selection (It's ready just need to modify something)

I'll try to be short and get to the point.
When I choose a role, it adds it to an array with the role's name and whether it's selected or not (with true or false). Actually the array is saved the following way:
[
{
"name": "CDB_DBA",
"selected": true
},
{
"name": "CONNECT",
"selected": true
}
]
and I need it to be saved this way (with the roles I select from the checkbox list):
["CDB_DBA", "CONNECT"]
The array contains the selected roles, I'm sure it's pretty simple to change but I'm new to this and need some help. Thank you in advance. Here's the JSBin link to the project:
JSBin Project

I have updated your link by creating a new array and pushing the value into that array while checking the checkbox
Can you check this is expected? If not please explain it briefly.
please check the below link
http://jsbin.com/huwepirolo/edit?html,js,output
$scope.updateArray= function(value){
alert(value);
$scope.array.push(value);
}

If you want to convert an array in the upper format to the lower one, you could use Array.filter to filter out just selected elements and then Array.map to pick out the name attribute:
var input = [
{
"name": "foo",
"selected": false
},
{
"name": "bar",
"selected": true
},
{
"name": "memes",
"selected": false
},
{
"name": "quux",
"selected": true
},
{
"name": "xyzzy",
"selected": false
},
{
"name": "corn",
"selected": true
}
];
var output = input
.filter(obj => obj.selected) // filter out non-selected elements
.map(obj => obj.name); // just get the name
console.log(output);
Note that this leaves input unmodified; output is a new array.

Generate form automatically with config file

I am building a website to help operator of my team to generate a data source config.
Since there are many options need to be handled. I design an common solution to render the page: parse a config file(maybe, xml or json format) to html with some rules. Maybe something like below:
{
"data_type": {
"title": "Data type",
"description": "Select what type do you want.",
"fields": [{
"title": "promotion",
"description": "data from promotion center"
"type": "redio",
"default": true,
"value": "p",
"name": "dtype"
}, {
"title": "brands",
"description": "data from brands center"
"type": "redio",
"default": false,
"value": "b",
"name": "dtype"
}]
}
}
then it can be parsed as:
<div class="form-control-group">
<h3>Data type</h3>
<p>Select what type do you want.</p>
<div class="form-control-filed">
<input type="redio" name="dtype" value="p" show="dtype" checked />
<p>data from promotion center</p>
</div>
<div class="form-control-filed">
<input type="redio" name="dtype" value="b" />
<p>data from brands center</p>
</div>
</div>
This step is easily to implement. But since there are some cases like. When I click redio A, I wanna hide the checkbox B. After I unchecked Checkbox C, I wanna show up the input D. I have no idea about how to design the config file to describe the logic about different fields.
So, the key point is, I wanna parse the html by a json snippet. Then maybe there are some symbols to mark the behavior of each form field, I can use my common js to bind events to handle the show/hide, focus/blur or something else logic. Like the attribute show, I can use my common js function to detect it and bind click event to that radio button, and show up the element with name="dtype" after this radio is clicked.
I am not sure if it is a good solution and how to design an reasonable json structure.
Hope any one can provide some suggestions. Thanks in advance.

I've given up for this case. For my requirement, I use a json file to config the information of the form field with a behavior definition to describe show/hide functionality.
{
"xxx": {
"title": "Price mode",
"description": "group_description",
"fields": [{
"title": "",
"type": "select",
"name": "price_mode",
"value": [{
"text": "Store with product",
"value": 1,
"default": true,
"behaviors": {
"show": "name1|name2|name3",
"hide": ""
}
}, {
"text": "Product",
"value": 2,
"default": false,
"behaviors": {
"show": "",
"hide": "name1|name2|name3"
}
}],
"require": true,
"rule": ""
}]
}
}
Codes of server side will parse this config and render as html snippet with special attribute storing behavior definition, then use javascript functions handle these attributes and care about the behavior after doing something like click the radio button or change the value of select list.

Selecting a value in select2 having optGroup

I'm giving following data input to select2
data = [{
"id": "all",
"text": "All",
"children": [{
"id": "item1",
"text": "item1"
}, {
"id": "item2",
"text": "item2"
}]
}];
and I'm initialising select2 as:
$(parent).select2({"data":data});
Now to select the value "item1", I did
$(parent).select2("val",["item1"]);
However instead of value "item1" value "all" is getting selected. How to select value item1?

To set the selected value using select2 you should use:
$(parent).val("item1").trigger("change");
From the release notes:
You should directly call .val on the underlying element instead. If you needed the second parameter (triggerChange), you should also
call .trigger("change") on the element.
$("select").val("1"); // instead of $("select").select2("val", "1");

JSFiddle where item1 is selected.
JS:
var data = [{
id: 'all',
text: 'All',
children: [{
id: 'item1',
text: 'item1'
}, {
id: 'item2',
text: 'item2'
}]
}];
$('.js-example-data-array').select2({data:data});
$('.js-example-data-array').select2('val',['item1']);
HTML:
<select class="js-example-data-array">
</select>

I tried to make this demo to show you that it works. The demo, uses the select tag as a selector for an empty and existing select element. Indeed, I don't know what are you meaning by parent:
<select>
</select>
<script>
data = [{
"id": "all",
"text": "All",
"children": [{
"id": "item1",
"text": "item1"
}, {
"id": "item2",
"text": "item2"
}]
}];
$('select').select2({
"data": data
});
$('select').select2("val", ["item2"]);
</script>

I'm not sure if you mean that the value "All" gets selected at start or if you want to select "item1" by code and it doesn't work. I find it strange that "All" gets selected as value since it should be treated as a category, even by adding
$(".select2-text").select2("val",["item1"]);
it won't select "All" for me. If i add
$(".select2-text").select2("val",["item2"]);
It will select "item2" for me (which means the method to select the item works, though it's not the best way, as stated in Lelio Faieta's Answer)
if i add
$(".select2-text").select2("val",["all"]);
it won't select "All" for me, it will just show me a blank select. So I think there must be an issue with your code because in a clean page there seems to be no way to select "All"
Can you show us the whole code, including the html of your page (at least the part relevant to the select). I have tried this (see plunker here: http://plnkr.co/edit/m6pFUt?p=preview )
<script>
$(document).ready(function() {
data = [{
"id": "all",
"text": "All",
"children": [{
"id": "item1",
"text": "item1"
}, {
"id": "item2",
"text": "item2"
}]
}];
$(".select2-text").select2({
"data": data
});
});
</script>
<select class="select2-text"></select>
And it starts with item1 selected, while "All" is treated as a category. So maybe it's just because something is wrong in your code/HTML.
What version of Select2 are you using? i'm using 2-4.0.0

Use checkbox to select item Angular JS

I want to be able to have a list of items and to select one using a checkbox:
<div data-ng-repeat="device in devices">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> {{ device.name }}
</label>
</div>
</div>
</div>
If this can be done using a custom directive that would also be cool!
So the idea, that when a checkbox is checked the device would go into an ng-model and all the other checkboxes would be disabled.
I have a feeling there needs to be a custom model created, something like:
devices = [{
name: "LED",
checked: false,
id: "98"
},{
name: "LED 2",
checked: false,
id: "8"
},{
name: "LED 3",
checked: false,
id: "78"
}]
Just need some function to fire each time one checkbox is checked.
I expect that it can be done with a ng-click on the checkbox? And a two way data binding on the model for canBeChecked
devices = [{
name: "LED",
checked: false,
id: "98",
canBeChecked: true
},{
name: "LED 2",
checked: false,
id: "8",
canBeChecked: true
},{
name: "LED 3",
checked: false,
id: "78",
canBeChecked: true
}]

Iterate over your collection and display a checkbox for each:
<div ng-repeat="device in devices">
<label>
{{ device.name }}
<input type="checkbox" ng-model="device.checked" ng-click="change(device)">
</label>
</div>
Note that the checkbox also has the ng-click directive. This is what you want to trigger each time a checkbox is clicked. The triggered function clears all checkboxes and only checks the clicked one. The checkboxes should now behave like radio buttons.
Your controller might look like this:
app.controller("MyCtrl", ["$scope", function($scope) {
$scope.devices = [{
name: "LED",
checked: false
}, {
name: "LED 2",
checked: false
}, {
name: "LED 3",
checked: false
}];
$scope.change = function(device) {
angular.forEach($scope.devices, function(item) {
item.checked = false;
});
device.checked = true;
};
}]);
It is not necessary to create the canBeChecked property you mention.
Here's the full working example: http://jsfiddle.net/zxdr8/

If you must use checkboxes, here is how you would do it.
Markup:
<div data-ng-repeat="device in devices">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="device.checked" ng-change="checkDevice(device)"> {{ device.name }}
</label>
</div>
</div>
</div>
Controller:
$scope.devices = [{
name: "LED",
checked: false,
id: "98"
},{
name: "LED 2",
checked: false,
id: "8"
},{
name: "LED 3",
checked: false,
id: "78"
}];
$scope.checkDevice = function (device) {
for (var i = 0, len = $scope.devices.length; i < len; ++i) {
if ($scope.devices[i] !== device)
$scope.devices[i].checked = false;
}
});

Your checked and canBeChecked properties seems like merely an UI thing. In my opinion, you should not be creating a custom data models and duplicating unnecessary properties just to do that. Believe me, I did things like that too when started using Angular, but there are much better ways.
Consider storing selected data in other location (model, service, controller, whatever). And maybe if you can store just an ID (primitive property), you can do your "checkbox-radio-like-element" like this:
<div ng-repeat="device in devices">
<label>
<input type="checkbox" ng-true-value="{{device.id}}" ng-false-value="" ng-model="some.storage">
{{device.name}}
</label>
</div>
And thats all you need, no background code needed. When Angular team implements interpolation support for ngTrueValue and ngFalseValue directives, you will be able to store the whole objects and reset model to e.g. null.