Develop Reference

Optgroup dynamic with javascript

I am trying to create dynamic. I fetch data with an ajax request and want to display it sorted. It will also receive the category name. My current result is that it is sorting but it is making a new optgroup instead of adding it to the old one
(https://i.imgur.com/P3oGXKl.gifv)
$.each(response, function(index, value) {
if (value['categories_name'] != current_sub) {
console.log(current_sub);
if (current_sub) {
tr += '</optgroup>'
}
tr += "<optgroup label='" + value['categories_name'] + "'>";
current_sub = value['categories_name'];
}
tr += '<option value="' + value['product_id'] + '">' + value['product_name'] + '</option>';
});
tr += '</optgroup>';

Set "Selected" Javascript from Dropdown List or combo box

My code loads the list drop down, but the option isn't selected. How can I set a default selected option?
Javascript:
var options = '';
options += '<option value="00">-- Pilih Salah Satu --</option>';
for (var s=0;s<json.kec.length;s++) {
options += '<option value="' + json.kec[s].dist + '">'
+ json.kec[s].dist+json.kec[s].name + '</option>';
}
$("select#kecamatan").html(options);
Any help is appreciated.

Is this javascript is on a function, if it is:
function getValues(default_value) {
var options = '';
options += '<option value="00">-- Pilih Salah Satu --</option>';
for (var s=0;s<json.kec.length;s++) {
if(json.kec[s].dist == default_value) {
options += '<option value="' + json.kec[s].dist + '" selected>' + json.kec[s].dist+json.kec[s].name + '</option>';
} else {
options += '<option value="' + json.kec[s].dist + '">' + json.kec[s].dist+json.kec[s].name + '</option>';
}
}
$("select#kecamatan").html(options);
}
Hope it helps.

You need to place a if check for what value you want to make the option selected and in if section you need to add selected="selected" as option tag attribute
var options = '';
options += '<option value="00">-- Pilih Salah Satu --</option>';
for (var s=0;s<json.kec.length;s++) {
if(your condition to make option selected)
options += '<option value="' + json.kec[s].dist + '" selected="selected">'
+ json.kec[s].dist+json.kec[s].name + '</option>';
}
else if(your condition to make option not selected)
{
options += '<option value="' + json.kec[s].dist + '">'
+ json.kec[s].dist+json.kec[s].name + '</option>';
}
$("select#kecamatan").html(options);

Inner HTML result of $.each javascript function

I am trying to make a select with the option value and text coming from two separate arrays (one is called like_list and the other like_list_name). The '$.each' joins two arrays and makes list of options. When I look in console.log I can see the options looking good:
$.each(like_list, function(i, item) {
console.log('<option value="' + like_list[i] + '">' + like_list_name[i] + '</option>');
});
But when I name the output as 'optionlist' and try to put 'optionlist' into the div 'friendselect' with Inner HTML it doesn't work:
var optionlist = $.each(like_list, function(i, item) {
'<option value="' + like_list[i] + '">' + like_list_name[i] + '</option>';
});
document.getElementById('friendselect').innerHTML = '[select]' + optionlist + '[/select]';
Is there anyway to get this select box into the 'friendselect' div? NOTE: i USED '[' because the side arrow wasn't working.

You should try with map function:
var optionlist = $.map(like_list, function(i, item) {
return '<option value="' + like_list[i] + '">' + like_list_name[i] + '</option>';
}).join('');
document.getElementById('friendselect').innerHTML = '<select>' + optionlist + '</select>';

$.each() doesn't return the values in it's function, you will have to add them toghether yourself.
The best thing you can do is add the options to the select in the each loop like so:
$.each(like_list, function(i, item) {
$("#friendselect").append('<option value="' + like_list[i] + '">' + like_list_name[i] + '</option>');
});

Populate a Dropdown Menu with JSON Data

Attempting to populate a drop down menu with JSON data but cant quite figure out what I am doing wrong.
JSON Data
{"dropdownValue1":"1x1","dropdownDisplay1":"1x1","dropdownValue2":"1x2","dropdownDisplay2":"1x2","dropdownValue3":"1x3","dropdownDisplay3":"1x3","dropdownValue4":"1x4","dropdownDisplay4":"1x4","dropdownValue5":"1x5","dropdownDisplay5":"1x5","dropdownValue6":"1x6","dropdownDisplay6":"1x6"}
Java/HTML
<script type="application/javascript">
$(function(){
$("select#size").change(function(){
$.getJSON("getDropdown",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + i + '">' + j[i] + '</option>';
}
$("select#size").append(options);
})
})
}) </script>
<div class="input select orderBoxContent">
<select name="size" id="size">
</select>
</div>
Actual JSON request
function getDropdown()
{
var people_no = $('#howmanypeople').val();
$.getJSON("../../getdata.php?getDropdown=yes&people_no="+people_no, function(response) {
$('#getDropdown').html(response.getDropdown);
});
}
Cheers
Ryan

Your JSON is an object but you are itterating it like an array.
var i;
for (i in j) {
if (j.hasOwnProperty(i)) {
// i = 'dropdownValue1'
// j[i] = "1x1"
// but the order is unknown
options += '<option value="' + j[i] + '">' + j[i] + '</option>';
}
}

$(function(){
$("select#size").change(function(){
$.getJSON("getDropdown",{id: $(this).val(), ajax: 'true'}, function(j){
var i;
for (i in j) {
if (j.hasOwnProperty(i)) {
// i = 'dropdownValue1'
// j[i] = "1x1"
// but the order is unknown
options += '<option value="' + j[i] + '">' + j[i] + '</option>';
}
}
$("select#size").append(options);
})
})
})

Enable selectBox after selecting another one

I trying to set two select-boxes to work by enabling the second select-box after choosing an option from the first.
The results comes from a json with js to a div on my page.
The 2nd select is set to disabled
First try:
JavaScript:
$(document).ready(function () {
$.getJSON('./system/feeds/built.search.php', function (json) {
var output = '';
output += '<div class="search_block">';
output += '<h2><img src="images/search_icon_big.png" alt=""> Search used cars</h2>';
output += '<form id="form1" class="form-style" method="post">';
output += '<label><strong>Company</strong><br>';
output += '<span class="select1">';
output += '<select name="companies" id="companies">';
output += '<option>All</option>';
output += '<option value="company">Company</option>';
for (var i = 0; i < json.company_models.length; i++) {
output += '<option value=' + json.company_models[i].company + '>' + json.company_models[i].company + '</option>';
}
output += '</select>';
output += '</span>';
output += '</label>';
output += '<label><strong>Model</strong><br>';
output += '<span class="select1">';
output += '<select name="models" id="models" disabled>';
output += '<option>Choose Company</option>';
$('#companies').change(function () {
if (this.value) {
document.getElementById('#models').disabled = true;
} else {
document.getElementById('#models').disabled = false;
}
});
for (i = 0; i < json.company_models.length; i++) {
output += '<option value=' + json.company_models[i].model + '>' + json.company_models[i].model + '</option>';
}
output += '</select>';
output += '</span>';
output += '</label>';
$('#search').html(output);
});
});
HTML:
<div id="search" class="grid_12"></div>
jsfiddle.net/mJdmQ
To make it more easy:
Company | Model: To choose the options from Model i must choose first an option from Company
PS: To save you sometime referring about similar questions, I already looked them...

You're looking for a .change() event with jQuery (onchange in pure js), and since this is dynamically loaded data, you'll need to use .on():
$(document).on("change", "#companies", function() {
this.value == "All" ? $("#models").prop("disabled", true) : $("#models").prop("disabled", false);
});