Create options with Constructor (JavaScript)

Create options with Constructor (JavaScript) - javascript

What I want to know
How to also apply the constructor to DOMs.selectTimes.
More efficient ways to clean up my code
What my code is for
I made a script which creates option elements for HTML forms dynamically. I could apply birthYear/birthMonth/birthDay to a constructor. But I can't do it for selectTimes. How can I do it? OR are there any more efficient ways?
Here is my code
(function() {
/* Fetch DOMs */
const DOMs = {
selectYear: document.querySelector('#select-birthyear'),
selectMonth: document.querySelector('#select-birthmonth'),
selectDay: document.querySelector('#select-birthday'),
selectTimes: document.querySelectorAll('.select-time'),
selects: document.querySelectorAll('.select')
};
/* Create options */
function createOptions() {
let html;
// Create time options
let arrTimes = [
'10:00',
'10:30',
'11:00',
'11:30',
'12:00',
'12:30',
'13:00',
'13:30',
'14:00',
'14:30',
'15:00',
'15:30',
'16:00',
'16:30',
'17:00',
'17:30',
'18:00'
];
DOMs.selectTimes.forEach(selectTime => {
for (let i = 0; i < arrTimes.length; i++) {
html = `<option value="${arrTimes[i]}">${arrTimes[i]}</option>`;
selectTime.insertAdjacentHTML('beforeend', html);
}
});
// Constructor for year/month/day
function OptionLoop(DOM, start, end, unit) {
this.DOM = DOM;
this.start = start;
this.end = end;
this.unit = unit;
}
OptionLoop.prototype.setOptions = function() {
for (let i = this.start; i <= this.end; i++) {
html = `<option value="${i}${this.unit}">${i}${this.unit}</option>`;
this.DOM.insertAdjacentHTML('beforeend', html);
}
};
// Set year/month/day options
const birthYear = new OptionLoop(DOMs.selectYear, 1960, 2005, '年');
const birthMonth = new OptionLoop(DOMs.selectMonth, 1, 12, '月');
const birthday = new OptionLoop(DOMs.selectDay, 1, 31, '日');
// Create year/month/day options
birthYear.setOptions();
birthMonth.setOptions();
birthday.setOptions();
}
/* Initialize */
function init() {
let isEmpty = false
// Fetch how many options each <select> has
DOMs.selects.forEach(select => {
if (select.childElementCount <= 1) {
return isEmpty = !isEmpty;
}
});
// Implement when each <select> has just one <option>
if (isEmpty) {
createOptions();
}
}
/* Implement the function when the window is loaded */
window.addEventListener('load', init);
})();
<select class="select select-time">
<option value="" disabled selected>START TIME1</option>
</select>
<select class="select select-time">
<option value="" disabled selected>END TIME1</option>
</select>
<select class="select select-time">
<option value="" disabled selected>START TIME2</option>
</select>
<select class="select select-time">
<option value="" disabled selected>END TIME2</option>
</select>
<select id="select-birthyear" class="select">
<option value="" disabled selected>YEAR</option>
</select>
<select id="select-birthmonth" class="select">
<option value="" disabled selected>MONTH</option>
</select>
<select id="select-birthday" class="select">
<option value="" disabled selected>DAY</option>
</select>

You can simply use custom Elments
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
class myTime extends HTMLSelectElement {
constructor() {
super()
this.OptTimes = [ '10:00', '10:30', '11:00', '11:30', '12:00', '12:30',
'13:00', '13:30', '14:00', '14:30', '15:00', '15:30',
'16:00', '16:30', '17:00', '17:30', '18:00' ]
}
connectedCallback() {
if (!this.dataset.range) {
for (let tim of this.OptTimes ) {
this.add(new Option(tim, tim))
}
}
else {
let [start, end, unit] = this.dataset.range.split(' ')
for(let i=start; i<=end; i++) {
this.add(new Option(`${i} ${unit}`,`${i} ${unit}`))
}
}
}
//disconnectedCallback() {}
}
customElements.define('my-time', myTime, {extends: 'select'})
<select is="my-time">
<option value="" disabled selected>START TIME1</option>
</select>
<select is="my-time">
<option value="" disabled selected>END TIME1</option>
</select>
<select is="my-time" data-range="1960 2005 年">
<option value="" disabled selected>YEAR</option>
</select>
<select is="my-time" data-range="1 12 月">
<option value="" disabled selected>MONTH</option>
</select>
<select is="my-time" data-range="1 31 日">
<option value="" disabled selected>DAY</option>
</select>

Related

Why i cant clear my dropdownlist preselect? [duplicate]

This belong to codes prior to Select2 version 4
I have a simple code of select2 that get data from AJAX.
$("#programid").select2({
placeholder: "Select a Program",
allowClear: true,
minimumInputLength: 3,
ajax: {
url: "ajax.php",
dataType: 'json',
quietMillis: 200,
data: function (term, page) {
return {
term: term, //search term
flag: 'selectprogram',
page: page // page number
};
},
results: function (data) {
return {results: data};
}
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});
This code is working, however, I need to set a value on it as if in edit mode. When user select a value first time, it will be saved and when he needs to edit that value it must appear in the same select menu (select2) to select the value previously selected but I can't find a way.
UPDATE:
The HTML code:
<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">
Select2 programmatic access does not work with this.

SELECT2 < V4
Step #1: HTML
<input name="mySelect2" type="hidden" id="mySelect2">
Step #2: Create an instance of Select2
$("#mySelect2").select2({
placeholder: "My Select 2",
multiple: false,
minimumInputLength: 1,
ajax: {
url: "/elements/all",
dataType: 'json',
quietMillis: 250,
data: function(term, page) {
return {
q: term,
};
},
results: function(data, page) {
return {results: data};
},
cache: true
},
formatResult: function(element){
return element.text + ' (' + element.id + ')';
},
formatSelection: function(element){
return element.text + ' (' + element.id + ')';
},
escapeMarkup: function(m) {
return m;
}
});
Step #3: Set your desired value
$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});
If you use select2 without AJAX you can do as follow:
<select name="mySelect2" id="mySelect2">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
/* "One" will be the selected option */
$('[name=mySelect2]').val("0");
You can also do so:
$("#mySelect2").select2("val", "0");
SELECT2 V4
For select2 v4 you can append directly an option/s as follow:
<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
<option value="TheID" selected="selected">The text</option>
</select>
Or with JQuery:
var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
$("#myMultipleSelect2").append($newOption).trigger('change');
other example
$("#myMultipleSelect2").val(5).trigger('change');

To dynamically set the "selected" value of a Select2 component:
$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});
Where the second parameter is an object with expected values.
UPDATE:
This does work, just wanted to note that in the new select2, "a_key" is "text" in a standard select2 object. so: {id: 100, text: 'Lorem Ipsum'}
Example:
$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});
Thanks to #NoobishPro

Html:
<select id="lang" >
<option value="php">php</option>
<option value="asp">asp</option>
<option value="java">java</option>
</select>
JavaScript:
$("#lang").select2().select2('val','asp');
jsfiddle

Also as I tried, when use ajax in select2, the programmatic control methods for set new values in select2 does not work for me!
Now I write these code for resolve the problem:
$('#sel')
.empty() //empty select
.append($("<option/>") //add option tag in select
.val("20") //set value for option to post it
.text("nabi")) //set a text for show in select
.val("20") //select option of select2
.trigger("change"); //apply to select2
You can test complete sample code in here link: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
In this sample code there is a ajax select2 and you can set new value with a button.
$("#btn").click(function() {
$('#sel')
.empty() //empty select
.append($("<option/>") //add option tag in select
.val("20") //set value for option to post it
.text("nabi")) //set a text for show in select
.val("20") //select option of select2
.trigger("change"); //apply to select2
});
$("#sel").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function(data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
function formatRepo(repo) {
if (repo.loading) return repo.text;
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection(repo) {
return repo.full_name || repo.text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">
<select id="sel" multiple="multiple" class="col-xs-5">
</select>
<button id="btn">Set Default</button>

I did like this-
$("#drpServices").select2().val("0").trigger("change");

var $option = $("<option selected></option>").val('1').text("Pick me");
$('#select_id').append($option).trigger('change');
Try this append then select. Doesn't duplicate the option upon AJAX call.

In the current version on select2 - v4.0.1 you can set the value like this:
var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
using "trigger(change)"
<select class="js-example-programmatic">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
using destroy:
<select class="js-example-programmatic">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
<button class="js-programmatic-set-val">set value</button>

$('#inputID').val("100").select2();
It would be more appropriate to apply select2 after choosing one of the current select.

Set the value and trigger the change event immediately.
$('#selectteam').val([183,182]).trigger('change');

I think you need the initSelection function
$("#programid").select2({
placeholder: "Select a Program",
allowClear: true,
minimumInputLength: 3,
ajax: {
url: "ajax.php",
dataType: 'json',
quietMillis: 200,
data: function (term, page) {
return {
term: term, //search term
flag: 'selectprogram',
page: page // page number
};
},
results: function (data) {
return {results: data};
}
},
initSelection: function (element, callback) {
var id = $(element).val();
if (id !== "") {
$.ajax("ajax.php/get_where", {
data: {programid: id},
dataType: "json"
}).done(function (data) {
$.each(data, function (i, value) {
callback({"text": value.text, "id": value.id});
});
;
});
}
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});

HTML
<select id="lang" >
<option value="php">php</option>
<option value="asp">asp</option>
<option value="java">java</option>
</select>
JS
$("#lang").select2().val('php').trigger('change.select2');
source: https://select2.github.io/options.html

For Ajax, use $(".select2").val("").trigger("change"). That should solve the problem.

In Select2 V.4
use $('selector').select2().val(value_to_select).trigger('change');
I think it should work

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');
I solved my problem with this simple code. Where #select_location_id is an ID of select box and value is value of an option listed in select2 box.

An Phan's answer worked for me:
$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});
But adding the change trigger the event
$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();

Sometimes, select2() will be loading firstly, and that makes the control not to show previously selected value correctly. Putting a delay for some seconds can resolve this problem.
setTimeout(function(){
$('#costcentreid').select2();
},3000);

you can use this code :
$("#programid").val(["number:2", "number:3"]).trigger("change");
where 2 in "number:2" and 3 in "number:3" are id field in object array

This work for me fine:
initSelection: function (element, callback) {
var id = $(element).val();
$.ajax("url/" + id, {
dataType: "json"
}).done(function (data) {
var newOption = new Option(data.title, data.id, true, true);
$('#select2_id').append(newOption).trigger('change');
callback({"text": data.title, "id": data.id});
});
},

You can use this code:
$('#country').select2("val", "Your_value").trigger('change');
Put your desired value instead of Your_value
Hope It will work :)

Official Select2 documentation says:
For Select2 controls that receive their data from an AJAX source, using .val() will not work. The options won't exist yet, because the AJAX request is not fired until the control is opened and/or the user begins searching.
To set value in select2 field place <option> tag inside <select> tag during page rendering:
<select id="input-degree">
<option value="1">Art</option>
</select>
When page is loaded you'll see Art in select2 field. If we click on this field data will be fetched from the server via ajax and other options will be shown.

Preselecting options in an remotely-sourced (AJAX) Select2
For Select2 controls that receive their data from an AJAX source, using .val() will not work. The options won't exist yet, because the AJAX request is not fired until the control is opened and/or the user begins searching. This is further complicated by server-side filtering and pagination - there is no guarantee when a particular item will actually be loaded into the Select2 control!
The best way to deal with this, therefore, is to simply add the preselected item as a new option. For remotely sourced data, this will probably involve creating a new API endpoint in your server-side application that can retrieve individual items:
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
// manually trigger the `select2:select` event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});

I did something like this to preset elements in select2 ajax dropdown
//preset element values
$(id).val(topics);
//topics is an array of format [{"id":"","text":""}, .....]
setTimeout(function(){
ajaxTopicDropdown(id,
2,location.origin+"/api for gettings topics/",
"Pick a topic", true, 5);
},1);
// ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url

You should use:
var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('<option value="Id">Text</option>').val("Id").trigger('change');
// For set multi selected values
var data = [];//Array Ids
var option = [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
// append the new option
$("#EventId").append('<option value="' + response.id + '">' + response.text + '</option>');
// get a list of selected values if any - or create an empty array
var selectedValues = $("#EventId").val();
if (selectedValues == null) {
selectedValues = new Array();
}
selectedValues.push(response.id); // add the newly created option to the list of selected items
$("#EventId").val(selectedValues).trigger('change'); // have select2 do it's thing
});

If you are using an Input box, you must set the "multiple" property with its value as "true". For example,
<script>
$(document).ready(function () {
var arr = [{ id: 100, text: 'Lorem Ipsum 1' },
{ id: 200, text: 'Lorem Ipsum 2'}];
$('#inputID').select2({
data: arr,
width: 200,
multiple: true
});
});
</script>

In select2 < version4 there is the option initSelection() for remote data loading, through which it is possible to set initial value for the input as in edit mode.
$("#e6").select2({
placeholder: "Search for a repository",
minimumInputLength: 1,
ajax: {
// instead of writing the function to execute the request we use Select2's convenient helper
url: "https://api.github.com/search/repositories",
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
q: term, // search term
};
},
results: function (data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter the remote JSON data
return { results: data.items };
},
cache: true
},
initSelection: function(element, callback) {
// the input tag has a value attribute preloaded that points to a preselected repository's id
// this function resolves that id attribute to an object that select2 can render
// using its formatResult renderer - that way the repository name is shown preselected
var id = $(element).val();
if (id !== "") {
$.ajax("https://api.github.com/repositories/" + id, {
dataType: "json"
}).done(function(data) { callback(data); });
}
},
formatResult: repoFormatResult, // omitted for brevity, see the source of this page
formatSelection: repoFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
Source Documentation : Select2 - 3.5.3

Just to add to anyone else who may have come up with the same issue with me.
I was trying to set the selected option of my dynamically loaded options (from AJAX) and was trying to set one of the options as selected depending on some logic.
My issue came because I wasn't trying to set the selected option based on the ID which needs to match the value, not the value matching the name!

For multiple values something like this:
$("#HouseIds").select2("val", #Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));
which will translate to something like this
$("#HouseIds").select2("val", [35293,49525]);

This may help someone loading select2 data from AJAX while loading data for editing (applicable for single or multi-select):
During my form/model load :
$.ajax({
type: "POST",
...
success: function (data) {
selectCountries(fixedEncodeURI(data.countries));
}
Call to select data for Select2:
var countrySelect = $('.select_country');
function selectCountries(countries)
{
if (countries) {
$.ajax({
type: 'GET',
url: "/regions/getCountries/",
data: $.param({ 'idsSelected': countries }, true),
}).then(function (data) {
// create the option and append to Select2
$.each(data, function (index, value) {
var option = new Option(value.text, value.id, true, true);
countrySelect.append(option).trigger('change');
console.log(option);
});
// manually trigger the `select2:select` event
countrySelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
}
}
and if you may be having issues with encoding you may change as your requirement:
function fixedEncodeURI(str) {
return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");
}

To build ontop of #tomloprod's answer. By the odd chance that you are using x-editable, and have a select2(v4) field and have multiple items you need to pre-select. You can use the following piece of code:
$("#select2field").on("shown", function(e, editable){
$(["test1", "test2", "test3", "test4"]).each(function(k, v){
// Create a DOM Option and pre-select by default~
var newOption = new Option(v.text, v.id, true, true);
// Append it to the select
$(editable.input.$input).append(newOption).trigger('change');
});
});
and here it is in action:
var data = [
{
id: 0,
text: 'enhancement'
},
{
id: 1,
text: 'bug'
},
{
id: 2,
text: 'duplicate'
},
{
id: 3,
text: 'invalid'
},
{
id: 4,
text: 'wontfix'
}
];
$("#select2field").editable({
type: "select2",
url: './',
name: 'select2field',
savenochange: true,
send: 'always',
mode: 'inline',
source: data,
value: "bug, wontfix",
tpl: '<select style="width: 201px;">',
select2: {
width: '201px',
tags: true,
tokenSeparators: [',', ' '],
multiple: true,
data:data
},
success: function(response, newValue) {
console.log("success")
},
error: function(response, newValue) {
if (response.status === 500) {
return 'Service unavailable. Please try later.';
} else {
return response.responseJSON;
}
}
});
var preselect= [
{
id: 1,
text: 'bug'
},
{
id: 4,
text: 'wontfix'
}
];
$("#select2field").on("shown", function(e, editable){
$(preselect).each(function(k, v){
// Create a DOM Option and pre-select by default~
var newOption = new Option(v.text, v.id, true, true);
// Append it to the select
$(editable.input.$input).append(newOption).trigger('change');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<a id="select2field">bug, wontfix</a>
I guess that this would work even if you aren't using x-editable. I hope that htis could help someone.

I use select2 with ajax source with Laravel. In my case it simple work cycling option i receive from page and add Option to select2..
$filtri->stato = [1,2,...];
$('#stato') is my select2 with server side load
<script>
#foreach ($filtri->stato as $item)
$('#stato').append(new Option("{{\App\Models\stato::find($item)->nome}}",{{$item}}, false, true));
#endforeach
</script>
In my case I can call text of option with find method, but it's possible do it with ajax call

clone form include dependent fields by vuejs

I have a form in which there should be submitting a price for various health care services. Treatments are already categorized. Now, I want to first select a treatment group from a selector and then select the treatment list for that category in the next selector. When I have just one form on the page, I have no problem. But I need to clone this form and the user can simultaneously record the price of some treatments. In this case, all the second selectors are set according to the last selector for the categories. While having to match their category's selector. I searched for the solution very well and did not get it. My code in vuejs is as follows. Please guide me. Thank you in advance.
<template>
<div>
<div id="treatment_information">
<div class="col-md-3">
<select id="category_name" class="form-control show-tick"
v-on:change="getTreatmentList($event)"
name="treatment_rates[]category_id" v-model="treatment_rate.category_id"
>
<option value="0"> -- select category --</option>
<option class="form-control main"
v-for="item in vue_categories" :id="item.id+1000" :value="item.id"
:name="item.name">
{{ item.name }}
</option>
</select>
</div>
<div class="col-md-3">
<select id="treatment_id" class="form-control show-tick"
name="treatment_rates[]treatment_id" v-model="treatment_rate.treatment_id"
>
<option value="0"> -- select treatment --</option>
<option class="form-control main"
v-for="item in vue_treatments" :value="item.id">
{{ item.value }}
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
vue_temp: [],
vue_categories: [],
vue_treatments: [],
vue_category: '',
//for clone form
treatment_rate: {
category_id: 0,
treatment_id: 0,
hospital_id: 0,
dollar: 'دلار',
rial: 'ریال'
},
treatment_rates: [],
};
},
mounted() {
console.log('Component mounted.');
this.getList();
},
methods: {
getList() {
var self = this;
axios.get('/vueDashboard/get/categories').then(function (response) {
self.vue_temp = response.data;
const len = self.vue_temp.length;
self.vue_temp.forEach(function (item) {
if (self.vue_right.length > 0) {
while (self.vue_right[self.vue_right.length - 1] < item['rgt']) {
self.vue_right.pop();
if (self.vue_right.length == 0)
break;
}
}
self.vue_categories.push({
'id': item['id'],
'name': '---'.repeat(self.vue_right.length) + ' ' + item['name']
});
self.vue_right.push(item['rgt'])
var str = "---";
});
}).catch(function (error) {
console.log(error);
});
axios.get('/vueDashboard/get/treatments?category=' + JSON.stringify(self.treatment_rates)).then(function (response) {
console.log(response.data);
self.vue_treatments = response.data;
}).catch(function (error) {
console.log(error);
});
},
addForm(event) {
var self = this;
self.vue_increment_id[self.vue_counter++]=self.vue_counter;
console.log(self.vue_increment_id);
self.treatment_rates.push(Vue.util.extend({}, self.treatment_rate));
},
}
}
</script>

How to hide a selectize option programmatically?

I currently have a selectize drop-down that is suppose to have some options in it disabled and hidden depending on a list of strings that I have. Here is the non-selectize javascript function that I tried:
<!DOCTYPE html>
<html>
<body>
<select onchange="ToggleSelectizeOptions(this.value)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="ford">Ford</option>
<option value="hyundai">Hyundai</option>
<option value="honda">Honda</option>
<option value="porsche">Porsche</option>
</select>
<select id="selectize">
<option value="">All Vehicles</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="ford">Ford</option>
<option value="hyundai">Hyundai</option>
<option value="honda">Honda</option>
<option value="porsche">Porsche</option>
</select>
<script>
function ToggleSelectizeOptions(ids) {
var selectizeOptions = document.getElementById("selectize").options;
var selectizeSingleOption;
//We always start at 1 because index 0 always have "" as the value.
for (var idx = 1; idx < selectizeOptions.length; idx++) {
selectizeSingleOption = selectizeOptions[idx];
if (ids) {
if (ids.includes(selectizeSingleOption.value)) {
selectizeSingleOption.style.display = "";
} else {
selectizeSingleOption.style.display = "none";
}
} else {
selectizeSingleOption.style.display = "";
}
}
}
</script>
</body>
</html>
This works with dropdowns that are not selectize controls but I'm looking for a solution that would use selectize.js to do the same thing.
I saw this question that is similar to what I want, except the answer disables the option while I want to hide the option.

I am not aware of a way to "hide" selectize options (with display css or otherwise) other than simply removing them from the options array that is created when you initialize a selectize control. If that is all that you need to do, then you can remove a selectize option by using the selectize removeOption(value) method (see the working snippet below for an example).
Based on your code example, it looks like your ultimate goal is to create cascading dropdowns. If so, see the 2nd snippet below for an example.
const sel1 = $('#select1').selectize();
sel1[0].selectize.removeOption('ford');
sel1[0].selectize.refreshOptions();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selectize</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
</head>
<body>
<select id="select1">
<option value="ford">Ford</option>
<option value="honda">Honda</option>
</select>
</body>
</html>
If your ultimate goal is to create cascading dropdowns where the value selected in the first select element determines which options are available in a second select element. The snippet below initializes the options in the javascript rather than the html.
const models = [{text: 'Models', value: ''}];
const makes = [
{text: 'Makes', value: ''},
{text: 'Ford', value: 'ford'},
{text: 'Honda', value: 'honda'}
];
const modelsByMake = {
ford: [
{text: 'Explorer', value: 'explorer'},
{text: 'Expedition', value: 'expedition'}
],
honda: [
{text: 'Civic', value: 'civic'},
{text: 'Accord', value: 'accord'}
]
};
const sel2 = $('#select2').selectize({
options: models,
items: [''],
valueField: 'value',
labelField: 'text',
sortField: 'value',
searchField: ['text'],
load: (query, callback) => {
let options = [];
$.each(modelsByMake, (i, v) => {
options = options.concat(v);
});
callback(options);
},
preload: true
});
const sel1 = $('#select1').selectize({
options: makes,
items: [''],
valueField: 'value',
labelField: 'text',
sortField: 'value',
searchField: ['text'],
onChange: (value) => {
let options = models;
if (value) {
// get models for selected make
options = options.concat(modelsByMake[value]);
} else {
// get all models
$.each(modelsByMake, (i, v) => {
options = options.concat(v);
});
}
sel2[0].selectize.clear(); // clear sel2 selected items
sel2[0].selectize.clearOptions(); // clear sel2 options
// load options corresponding to sel1 value in sel2
sel2[0].selectize.load((callback) => {
callback(options);
});
// refresh sel2 options list
sel2[0].selectize.refreshOptions();
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selectize</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
</head>
<body>
<select id="select1"></select>
<select id="select2"></select>
</body>
</html>

Add working hours of a Organization

If I select Sunday, Monday and working hours from 08.00 to 20.00 I need to send 1&08:00&20:00,2&08:00&20:00. How can I able to implement the same in vue javascript?
My current code is
<script>
submitBox = new Vue({
el: "#submitBox",
data: {
articles: [],
services: [],
username: '',
category: '',
subcategory: [],
image: '',
hours: '',
},
methods: {
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
handelSubmit: function(e) {
var vm = this;
data = {};
data['lat'] = this.$refs.myLatField.value;
data['lng'] = this.$refs.myLngField.value;
data['username'] = this.username;
data['category'] = this.category;
data['subcategory'] = this.subcategory;
data['image'] = this.image;
data['hours'] = this.hours;
$.ajax({
url: 'http://127.0.0.1:8000/api/add/post/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status) {
alert("Registration Success")
window.location.href = "https://localhost/n2s/registersuccess.html";
} else {
vm.response = e;
alert("Registration Failed")
}
}
});
return false;
}
},
});
</script>
My html form is
<div id="submitBox">
<form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
<input type="checkbox" value="1" v-model="hours">Sunday
<select>From
<option value="">08.00</option>
<option value="">12.00</option>
<option value="">20.00</option>
<option value="">24.00</option>
</select>
<select>To
<option value="">08.00</option>
<option value="">12.00</option>
<option value="">20.00</option>
<option value="">24.00</option>
</select><br>
<input type="checkbox" value="2" v-model="hours">Monday
<select>
<option value="">08.00</option>
<option value="">12.00</option>
<option value="">20.00</option>
<option value="">24.00</option>
</select>
<select>
<option value="">08.00</option>
<option value="">12.00</option>
<option value="">20.00</option>
<option value="">24.00</option>
</select><br>
</form>
</div>
I am able to pass all other values. So, I haven't included that in the form.
How can I able to select day and working hours and pass it accordingly. Please help me to solve the same

I am not familar with vue.js but you can try something like:
new Vue({
el: '#example-3',
data: {
day:[
{name:"Sunday",val:1},
{name:"Monday",val:2}
],
string:''
},
methods: {
generate: function (event) {
var arr = [];
this.day.map(function(v,i) {
console.log(v.selected == true,);
if(v.selected == true)
{
arr.push(v.val+'&'+v.from+'&'+v.to);
}
});
this.string = arr.join(',');
}
}
})
html:
<div id='example-3'>
<div v-for="value in day">
<input type="checkbox" id="sun" value="value.val" v-model="value.selected">
<label for="sun">{{value.name}}</label>
<select v-model="value.from">From
<option value="08.00">08.00</option>
<option value="12.00">12.00</option>
<option value="20.00">20.00</option>
<option value="24.00">24.00</option>
</select>
<select v-model="value.to">To
<option value="08.00">08.00</option>
<option value="12.00">12.00</option>
<option value="20.00">20.00</option>
<option value="24.00">24.00</option>
</select>
<br>
</div>
<button v-on:click="generate">generate</button>
<span>string: {{ string }}</span>
demo:https://jsfiddle.net/d8ak8ob6/1/

angular ui select2, bind data undefined

I use angular-ui-select2.
<select ui-select2 ng-model="vm.salonStaffModel.type">
<option ng-repeat="occ in vm.categoriesType" value="{{occ.key}}">
{{occ.key}}</option>
</select>
I bind data to vm.salonStaffModel.type successfully, when I select value from dropdown list. But when I refresh page, the value is undefined, although vm.salonStaffModel.type has value, which I have selected before. Thanks!
This is my controller
export default class SalonStaffCreateCtrl {
constructor($state, SalonStaff, SalonListService, popUpMessageService) {
this.submitted = false;
this.popUpMessageService = popUpMessageService;
this.salonListService = SalonListService;
this.salonStaffModel = {
type:"AUS"
};
this.SalonStaff = SalonStaff;
this.state = $state;
this.yesNoLazylist = [{ "key": false, "group": null }, { "key": true, "group": null }];
this.categoriesType = [{"key":"AUS","group":null,"$$hashKey":"object:259"},{"key":"BD","group":null,"$$hashKey":"object:260"},{"key":"735","group":null,"$$hashKey":"object:261"},{"key":"713","group":null,"$$hashKey":"object:262"},{"key":"714","group":null,"$$hashKey":"object:263"},{"key":"IND","group":null,"$$hashKey":"object:264"},{"key":"734","group":null,"$$hashKey":"object:265"},{"key":"711","group":null,"$$hashKey":"object:266"},{"key":"716","group":null,"$$hashKey":"object:267"},{"key":"731","group":null,"$$hashKey":"object:268"},{"key":"BUR","group":null,"$$hashKey":"object:269"},{"key":"NZ","group":null,"$$hashKey":"object:270"},{"key":"PK","group":null,"$$hashKey":"object:271"},{"key":"733","group":null,"$$hashKey":"object:272"},{"key":"SGP","group":null,"$$hashKey":"object:273"},{"key":"717","group":null,"$$hashKey":"object:274"},{"key":"T","group":null,"$$hashKey":"object:275"},{"key":"USA","group":null,"$$hashKey":"object:276"},{"key":"725","group":null,"$$hashKey":"object:277"}];
this.categoriesService = [];
this.getServiceSalon();
}
}
SalonStaffCreateCtrl.$inject = ['$state', 'SalonStaff', 'SalonListService', 'popUpMessageService'];
<div class="form-group">
<label>Type *</label>
<select ui-select2 ng-model="vm.salonStaffModel.type">
<option ng-repeat="occ in vm.categoriesType" value="{{occ.key}}">
{{occ.key}}</option>
</select>
<p ng-show="frm.type.$error.required && vm.submitted" class="red-text error-label-dropdown">Mandatory field(s)</p>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Create options with Constructor (JavaScript) - javascript

Related

Why i cant clear my dropdownlist preselect? [duplicate]

clone form include dependent fields by vuejs

How to hide a selectize option programmatically?

Add working hours of a Organization

angular ui select2, bind data undefined

Categories

Resources