We Keep Coding

Is there a different way to update the wrapper for when dynamically updating dropdown checklst

I trying to create a html and java script front-end for my python back-end. I am parsing the data from a tsv file and then dynamically updating the drop down list. I don't have much experience with html and javascript and am trying to learn.
I am using jQuery drop down multiselect
<form id="form-user" action="#" method="post">
<center>
<select id='testSelect1' multiple>
<option value='1'>Item 1</option>
<option value='2'>Item 2</option>
<option value='3'>Item 3</option>
<option value='4'>Item 4</option>
<option value='5'>Item 5</option>
<option value='1'>Item 1</option>
<option value='2'>Item 2</option>
</select>
</center>
</form>
Code for html layout
$('#testSelect1').multiselect({
columns: 1,
placeholder: 'Select Shoporder',
selectAll: true,
minCount: 30
});
This is how I am initializing it:
function updateShopOrder(data) {
var inner_HTML = [];
var temp = "<option value=";
const element = document.getElementById('testSelect1');
var value = "hello";
$(document).ready(function() {
for (i = 0; i < 20; i++) {
//var newOption = document.createElement("option");
//newOption.value = "tt";
//newOption.text = "test";
//element.add(newOption);
element.innerHTML += temp.concat(i.toString(), ">", "item ", i.toString(), "</option>");
//document.multiselect('#testSelect1').append("<option value=\"" + i.toString() + "\">" + value
+ " </option>");
//$('#testSelect1').multiselect( 'refresh' );
//$('#testSelect1').multiselect( 'rebuild' );
}
});
}
Code for how i am trying to update the the list. Commented out are stack overflow solutions I tried before. However everything I tried so far updates the html but does not update the wrapper (observation from devtools) enter image description here.
Any help would be greatly appreciated.
// DYNAMICALLY LOAD OPTIONS
$('select[multiple]').multiselect( 'loadOptions', [{
name : 'Option Name 1',
value : 'option-value-1',
checked: false,
attributes : {
custom1: 'value1',
custom2: 'value2'
}
},{
name : 'Option Name 2',
value : 'option-value-2',
checked: false,
attributes : {
custom1: 'value1',
custom2: 'value2'
}
}]);
I found this in the documentation but how would i go about implementing it using a for loop?

Try this code
$.each(data, function (index, value) {
// APPEND OR INSERT DATA TO SELECT ELEMENT.
$('#testSelect1').append('<option value="' + value.ID + '">' + value.Name + '</option>');
});
Iterate over your data somehow and append that to the html file. Refresh periodically for the change to reflect in your html

how to keep last time selected value in dropdownlist even after re-open app

dropdown = '';
dropdown += '<option value="' + CONFIGURATOR.ChineseLanguage + '">Series 1520</option>\n';
dropdown += '<option value="' + CONFIGURATOR.EnglishLanguage + '">Series 1580</option>\n';
$('.tab-setup select[name=languageSelect]').html(dropdown);
html
<select class="dropdown" name="languageSelect" id="selectlanguage"></select>
datavariable.js
var CONFIGURATOR = {
'ChineseLanguage': 'zh',
'EnglishLanguage': 'en'
};
how to keep last time selected option in dropdownlist still appear even after re-open app

You can use localStorage api to store the value, and it will be persisted even when the application is closed.
var dropdown = '',
$select = $('.tab-setup select[name=languageSelect]'),
storedValue = localStorage.getItem('languageSelectValue');
dropdown += '<option value="' + CONFIGURATOR.ChineseLanguage + '">Series 1520</option>\n';
dropdown += '<option value="' + CONFIGURATOR.EnglishLanguage + '">Series 1580</option>\n';
$select.html(dropdown);
//Set the initial value if any
if (storedValue) {
$select.val(storedValue);
}
//Bind a listener to store the selected value in localStorage
$select.on('change', function () {
localStorage.setItem('languageSelectValue', $(this).val());
});

How to create dropdown list using json data

I have pulled data from mysql table and decode json_decode now
we have json array for board,class,subject and they are related like parent ->child->grandchild(board->class->subject)
board_auto_id is first of classList json array class_auto_id is the first index of classSubjectList
Note : I have posted partial array of classList and classSubjectList
var boardList =[{"board_auto_id":"1","board_name":"CBSE"},{"board_auto_id":"2","board_name":"ICSE"},{"board_auto_id":"3","board_name":"NCERT"}];
var classList = {"1":[{"class_auto_id":"1","class_name":"VI"},{"class_auto_id":"2","class_name":"VII"},{"class_auto_id":"3","class_name":"VIII"},{"class_auto_id":"4","class_name":"IX"},{"class_auto_id":"5","class_name":"X"},{"class_auto_id":"6","class_name":"XI"},{"class_auto_id":"7","class_name":"XII"}]};
var classSubjectList = {"1":[{"class_auto_id":"1","sub_auto_id":"1","subject_name":"Science"},{"class_auto_id":"1","sub_auto_id":"2","subject_name":"Mathematics"},{"class_auto_id":"1","sub_auto_id":"3","subject_name":"Geography : The Earth Our Habitat "},{"class_auto_id":"1","sub_auto_id":"4","subject_name":"History : Our Pasts - I"},{"class_auto_id":"1","sub_auto_id":"5","subject_name":"Civics : Social And Political Life-I"},{"class_auto_id":"1","sub_auto_id":"86","subject_name":"English : Grammar"},{"class_auto_id":"1","sub_auto_id":"139","subject_name":"English : Writing Skills"},{"class_auto_id":"1","sub_auto_id":"155","subject_name":"English : Reading"},{"class_auto_id":"1","sub_auto_id":"209","subject_name":"संस्कृत : व्याकरण"},{"class_auto_id":"1","sub_auto_id":"220","subject_name":"Computer Science"},{"class_auto_id":"1","sub_auto_id":"235","subject_name":"Literature in English ( NCERT)"},{"class_auto_id":"1","sub_auto_id":"238","subject_name":"हिंदी व्याकरण"},{"class_auto_id":"1","sub_auto_id":"253","subject_name":"English : Vocabulary"}],"2":[{"class_auto_id":"2","sub_auto_id":"6","subject_name":"Science"},{"class_auto_id":"2","sub_auto_id":"7","subject_name":"Mathematics"},{"class_auto_id":"2","sub_auto_id":"8","subject_name":"Geography : Our Environment"},{"class_auto_id":"2","sub_auto_id":"9","subject_name":"History : Our Pasts - II"},{"class_auto_id":"2","sub_auto_id":"10","subject_name":"Civics : Social And Political Life - II"},{"class_auto_id":"2","sub_auto_id":"87","subject_name":"English : Grammar"},{"class_auto_id":"2","sub_auto_id":"140","subject_name":"English : Writing Skills"},{"class_auto_id":"2","sub_auto_id":"154","subject_name":"English : Reading"},{"class_auto_id":"2","sub_auto_id":"210","subject_name":"संस्कृत : व्याकरण"},{"class_auto_id":"2","sub_auto_id":"213","subject_name":"Computer Science"}]}
HTML code
<select name="boardId" id="boardId" class="style1"><option value="">Select Board</option></select>
<select name="classId" id="classId" class="style1"><option value="">Select Class</option></select>
<select name="subjectId" id="subjectId" class="style1"><option value="">Select Subject</option></select>

You can do something like this to bind json to dropdown
<select id="boardList"></select>
$.each(boardList, function (key, value) {
console.log(value.board_auto_id);
appenddata += "<option value = '" + value.board_auto_id + " '>" + value.board_name + " </option>";
});
$('#boardList').html(appenddata);
OnChange of boardList dropdown you need to filter records from another jsonArray and bind it to the next dropDown same as mentioned in above code.

first display board by using
jQuery.each(boardList, function(i , item) {
selectedBoard='';// if you display no board selected
boardListHtml += '<option '+ selectedBoard +' value="'+item.board_auto_id+'">'+item.board_name+'</option>';
});
jQuery('#boardId').html(boardListHtml);
create function for class and subject for each call
function getBoardByClass(boardId){
jQuery('#classId').html('');
var classChapterListHtml = '<option value="">Select Class</option>';
jQuery.each(classList, function(i , item) {
var selectedClass = (boardId ==item.class_auto_id) ? 'selected' : '';
classChapterListHtml += '<option '+ selectedClass +' value="'+item.class_auto_id+'">'+item.class_name+'</option>';
});
jQuery('#classId').html(classChapterListHtml);
}
function getSubjectByClass(classID){
jQuery('#subjectId').html('');
var subjectListHtml = '<option value="">Select Subject</option>';
jQuery.each(classSubjectList, function(id , subjectList) {
if (classID==id) {
jQuery.each(subjectList, function(subIds , subjectName) {
subjectListHtml += '<option value="'+subjectName.sub_auto_id+'">'+subjectName.subject_name+'</option>';
});
}
});
jQuery('#subjectId').html(subjectListHtml);
}
and finally change event for class and subject filter
$("#boardId").change(function() {
jQuery('#classId').html('');
getBoardByClass($(this).val());
});
$("#classId").change(function() {
jQuery('#subjectId').html('');
getSubjectByClass($(this).val());
});

How to get the data value from a select box using selectize js

I am able load the options to a selectize js select box. But how can I get the data-value from it? For example:
$('#product_id').append('<option data-no_of_reams="'+data[i].no_of_reams+'" value="'+data[i].id+'">'+data[i].c_code+'</option>');
I get the the value from it but unable to get the data from data-no_of_reams="'+data[i].no_of_reams+'". Help me to find the data of data-no_of_reams
The full code here
function getAllCCode(){
$.ajax({
url: '/inward/allccode/',
type: 'GET',
datatype: 'JSON',
success: function(data){
$('#product_id').append('<option value="">Select</option>');
for (var i in data){
$('#product_id').append('<option data-size="'+data[i].size_h+'X'+data[i].size_w+'" data-radius="'+data[i].radius+'" data-type="'+get_type(data[i].type)+'" data-meal="'+get_mill(data[i].mill)+'" data-variety="'+get_code(data[i].variety)+'" data-ream_weight="'+data[i].ream_weight+'" data-no_of_reams="'+data[i].no_of_reams+'" value="'+data[i].id+'">'+data[i].c_code+'</option>');
}
}
}).done(function() {
$('#product_id').selectize({
onChange : function(){
alert('hello');
}
});
});
}
Thanks in advance

You can easily do this with the new version using data-data within the option. You can create the option tag either statically or programmatically (using $.ajax).
The trick is to use the this.options within selectize to access the original options that the selectize control was built from.
<select name="product_id" id="product_id">
<option value="123" data-data="{id:'123',no_of_reams:'1212',name:'Great Expectations'}">Great Expectations Book</option>
<option value="987" data-data="{id:'987',no_of_reams:'7766',name:'Great Gatsby'}">Great Gatsby Book</option>
</select>
<script>
$('#product_id').selectize({
valueField: 'id',
labelField: 'name',
render: {
item: function(item, escape) {
return '<div>' +
'<div class="title">' + escape(item.name ? item.name : 'no title') + '</div>' +
'<div class="description">' + escape(item.description ? item.description : 'no description') + '</div>' +
'</div>';
},
option: function(item, escape) {
return '<div>' +
'<div class="title">' + escape(item.name ? item.name : 'no title') + '</div>' +
'<div class="description">' + escape(item.description ? item.description : 'no description') + '</div>' +
'</div>';
}
},
onChange: function(val) {
var data = this.options[val]; // <-- This is how to pull data-data from the original options
console.log(data); // stores the data-data as a json object
alert(data.no_of_reams);
}
});
</script>
Also, if you are using PHP to do the markup, make sure you use htmlentities like so:
<select name="product_id" id="product_id">
<option value="123" data-data="<?php echo htmlentities(json_encode(array('id' => 123, 'no_of_reams' => 1212, 'name' => 'Great Expectations'))) ?>">Great Expectations Book</option>
<option value="987" data-data="<?php echo htmlentities(json_encode(array('id' => 987, 'no_of_reams' => 7766, 'name' => 'Great Gatsby'))) ?>">Great Gatsby Book</option>
</select>
And, per the selectize documentation, when you use render and valueField, you are overwriting the default <option value="val">name</option>, so those are pulled from the data-data instead of being auto-set from the actual value on the <option>. You can see this because even though the <option> text is Great Expectations Book, it will actually just display the name field from data-data - in this case just Great Expectations

With this version you won't have to change your HTML. Works with jQuery .data() as well
// assuming HTML that looks like:
// <select id='mySelect'>
// <option val='123' data-myparam='ONE'>My Option 1</option>
// <option val='123' data-myparam='TWO'>My Option 2</option>
// </select>
$(document).ready( function(){
// keep .data (selectize ver 0.12.4 bug / library deletes .data by default)
$('#mySelect').selectize({
onInitialize: function(){
var s = this;
this.revertSettings.$children.each( function(){
$.extend(s.options[this.value], $(this).data());
});
}
});
// Then to read back in:
$('#mySelect').on('change', function(){
var s = $('#mySelect')[0].selectize; //get select
var data = s.options[s.items[0]]; //get current data() for the active option.
alert('your data is: ' + data.myparam);
});
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script>
<select id='mySelect'>
<option val='123' data-myparam='ONE'>My Option 1</option>
<option val='123' data-myparam='TWO'>My Option 2</option>
</select>

The problem with selectize is that when building combobox plugin copies initial select options with their values and labels, but apparently it ignores all other attributes, including data-* ones. After plugin is initializes there are basically no data- attributes anymore, so you can't read selected option no_of_reams.
The workaround I came with is to store data object in select element internal data so you can access it later. This will work:
$.ajax({
url: '/inward/allccode/',
type: 'GET',
datatype: 'JSON',
success: function(data) {
$('#product_id').append('<option value="">Select</option>').data('data', data);
for (var i in data) {
$('#product_id').append('<option value="' + data[i].id + '">' + data[i].c_code + '</option>');
}
}
}).done(function() {
$('#product_id').selectize({
onChange: function(value) {
var selectedObj = this.$input.data('data').filter(function(el) {
return el.id === Number(value);
})[0];
alert(selectedObj.no_of_reams)
}
});
});
It's pretty convenient: now in onChange callback you have entire selectedObj, so you don't even need data-attributes anymore.
Here is a demo: http://plnkr.co/edit/pYMdrC8TqOUglNsXFR2v?p=preview

Use getAttribute('data-whatever') if only javascript.
Use .data('whatever') if using jquery.
$(document).ready(function() {
var reamsArr = ['34', '44', '55'];
$.each(reamsArr, function(index, val) {
$('#product_id').append("<option value=" + val + " data-no_of_reams=" + val + ">" + val + "</option>");
})
$("#product_id").on("change", function() {
alert($("#product_id option:selected").data("no_of_reams"));
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="product_id"></select>

Get IDs from select and use them in if statement

I have a form with a select box, like so:
<select id="school">
<option>Choose school</option>
<option value="656462">test</option>
<option value="653671">test1</option>
<option value="653688">test2</option>
</select>
How do I get the option values from the above options? I want to use the values in the below jQuery code:
$("select#school").change(function(){
$("select#locatie").html('<option value="">Course</option>');
$("select#lijst").html('<option value="">List</option>');
$("#cat1").html($("#school option:selected").text());
$("#cat2").html('Course');
$("#cat3").html('List');
var options = '';
$(function(){
$("select#school").change(function(){
$("select#location").html('<option value="">Location</option>');
$("select#list").html('<option value="">List</option>');
$("#cat1").html($("#school option:selected").text());
$("#cat2").html('Course');
$("#cat3").html('List');
var options = '';
if($("#school").val() == 656462){
options += '<option value="">Course</option>';
options += '<option value="12345">test1</option>';
}
if($("#school").val() == 653671){
options += '<option value="">Course</option>';
options += '<option value="89887">test2</option>';
}
if($("#school").val() == 653688){
options += '<option value="">Course</option>';
options += '<option value="548798">test25</option>';
}
$("select#locatie").html(options);
});
});
Basically, for every option value there's a new if statement. Problem is that the selectbox is filled with a lot of option values which are generated automatically. So now I have to do everything by hand instead of automatically generated if statements.
So what I try to do is:
1) get all the option values from the
2) use these option values to create an if statement for every value
Any help greatly appreciated

If I understand what you're trying to do, you want to create new options for a second select based on the results of the first? I'd probably store the possible options in an array on an object:
var courseSelection = {
"656462": [ { value: "123456", text: "Course 1" }, { value: "234567", text: "Course 2" } ],
"653671": [ { value: "345678", text: "Course 3" }, { value: "456789", text: "Course 4" } ],
"653688": [ { value: "567890", text: "Course 5" }, { value: "678901", text: "Course 6" } ]
};
And then in your change event handler, (as you state) you can loop through each object in the array to build the appropriate list:
$("select#school").change(function(){
var options = '',
courses = courseSelection[$(this).val()];
$('select#course').empty();
options += '<option value="">Course</option>';
$.each(courses, function() {
options += '<option value="' + this.value + '">' + this.text + '</option>';
});
$('select#course').append(options).show();
});
JSFiddle describing what I mean. Let me know if I've got the wrong end of the stick here!

Re-think your approach. In this case, I'll do one of the following:
On the #school change event send the selected value to the server to get the list of matching options; or
If you want to do it all on the client side, create an array that for each possible value, gives matching options. This way you can avoid all this ugly if statements.