How can I make the option selected according to the value I get from value[0] in the loop?
$.each(data, function(key, value) {
$("#cektubuh").append(
`<tr>
<td>
<select name="duration_type[]" class="form-control" required>
// here I want to add the selected option according to $ {value [0]}
<option value="Semester">Semester</option>
<option value="Month">Month</option>
</select>
</td>
</tr>`
});
});
As you have not provided an example of the data, there is no way to know what values are being used here or how they compare. Here is a basic example based on what you have provided.
$.each(data, function(k, v) {
var row = $("<tr>").appendTo($("#cektubuh"));
var cell = $("<td>").appendTo(row);
var sel = $("<select>", {
name: "duration_type[]",
class: "form-control"
}).prop("required", true).appendTo(cell);
$("<option>", {
value: v[0]
}).html(v[0]).prop("selected", true).appendTo(sel);
$("<option>", {
value: "Semester"
}).html("Semester").appendTo(sel);
$("<option>", {
value: "Month"
}).html("Month").appendTo(sel);
});
If it's more complex or has multiple elements, please provide an example of the structure so that a more complete answer can be shown.
if you have value which belongs to options list and you want to show as selected option
just do this.
var value = 'some value';
$('name="duration_type[]"').val(value);
it will show that value as selected.
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
I am using a button click using jquery to create dynamically <li> that has inside html select. The value of the selects comes dynamically with json. my ul id is ulOption1
var strtable = '<li>';
strtable += '<select style="display: inline;width:500px" class=" ddlOption1 form-control " >';
$.each(res, function (i, o) {
strtable += '<option value="'+ o.ValueName +'">'+ o.ValueName +'</option>';
});
strtable +='</select>';
strtable += '</li>';
$('#ulOption1').append($(strtable));
Untill now everything works great.
After the user has created as many select that he wants i would like to grap the values that has been selected. What i am trying is :
$('#ulOption1 li').each(function () {
var $input = $(this).find('input');
var grapedvalue = $(".ddlOption1 form-control option:selected").val();
});
but grapedvalue never takes the selected
ddlOption1.val();
Check this:
$('#ulOption1 li').each(function () {
var $input = $(this).find('input');
//here it will find the select in li and grab its selected value
var grapedvalue = $(this).find(".ddlOption1 option:selected").val();
alert(grapedvalue)
});
Working fiddle:
http://jsfiddle.net/H6rQ6/16960/
Try this :
var selectedValue = [];
$(".ddlOption1").each(function(){
selectedValue.push($(this).find('option:selected').val());
});
You have all the selected value of the select with attribute class ddlOption1 in selectedValue.
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());
});
I'm generating a select list dynamically from an array of data and I want to add option group based on alphabet.
e.g. data
data = [
['bcde','21254'], ['abcd','1234'], ['abcde','23456'], ['bcdef','3232']
];
data.sort(); takes care of ordering based on alphabet and then I go through the data and on each I do something like:
<option value="item[1]">item[0]</option>
However what I want to do is, after getting the items sorted based on alphabet, check the first character of each item and create option group based on that, when character of next item is different create a new option group labelled with the new character
so the output should look like:
<select>
<optgroup label="A">
<option value="1234">abcd</option>
<option value="23456">abcde</option>
</optgroup>
<optgroup label="B">
<option value="21254">bcde</option>
<option value="3232">bcdef</option>
</optgroup>
</select>
Can anyone please advice what's the best way to do this, I'm using jquery by the way, cheers.
Edit, this is my current code:
$.when( $.indexedDB("dbname").objectStore('employee').each(function(item){
employeenames.push([item.value.name,item.value.id]);
}).then(function(){
employeenames.sort();
$.each(employeenames, function(index, item){
employeenames[index] = '<option value="'+item[1]+'">'+item[0]+'</option>';
});
})
).done(function() {
$("#employeenameBox select").html(employeenames);
});
Try
data.sort();
var chars = {};
$.each(data, function (_, item) {
var char = item[0].charAt(0).toUpperCase();
if (!chars[char]) {
chars[char] = $('<optgroup />', {
label: char
}).appendTo('select');
}
$('<option />', {
text: item[0],
value: item[0]
}).appendTo(chars[char]);
});
Demo: Fiddle
Update:
$.when($.indexedDB("dbname").objectStore('employee').each(function (item) {
employeenames.push([item.value.name, item.value.id]);
}).then(function () {
employeenames.sort();
var chars = {};
$.each(employeenames, function (_, item) {
var char = item[0].charAt(0).toUpperCase();
if (!chars[char]) {
chars[char] = $('<optgroup />', {
label: char
}).appendTo('#employeenameBox select');
}
$('<option />', {
text: item[0],
value: item[0]
}).appendTo(chars[char]);
});
});