Based on a value of one listbox (selecttreatment), another listbox (indicators) options are being populated. The javascript code i use:
function sendData() { // onchange
$("#indicators").empty();
console.log($("#selecttreatment").val());
$.getJSON("functions/getcharts.php", {funcid:"giveme_chosen_treatment", chosen_treatment: $("#selecttreatment").val()}, updateData);
}
function updateData(data) {
console.log(data);
var option = '';
for (var i=0;i<data.length;i++){
//option += '<option value="'+ data[i].zi_indicator_name_id + '">' + data[i].zi_indicator_name_label + '</option>';
option += '<option value="'+ data[i].indicator_name + '">' + data[i].indicator_name + '</option>';
}
$('#indicators').append(option);
}
At first I believed it only went wrong when mysql gives back one row, but that isn't the problem. I can't fugure out whats going wrong.
So my problem is that sometimes the 2nd listbox is being populated with values, but most of the times it isn't.
Related
I want to append value from the selected option to input. The option in <select> is from looping. So whenever I try to append the value somehow I always get the last record from the select option, not the one I have chosen.
Here is my code:
$('select[name="service"]').empty();
$.each(data, function(key, value) {
$.each(value.costs, function(key1, value1) {
$.each(value1.cost, function(key2, value2) {
$('select[name="service"]').append('<option value="' +
key + '">' + value1.service + ' - ' + value1.description + ' - ' +
value2.value +'</option>');
// I want to append the value2.value from selected option into this, but I always got the last record
$('input[name="cost"]').val(value2.value);
});
});
});
I want to append the value from the selected option to this, but I always got the last record from the loop.
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());
});
When I add the first value in the text box it's updating in drop down when I refresh its retaining the value due to local storage. However when I add another value and refresh the page its not retaining first value.
How can I retain more than one value in the drop down after I make a page refresh?
http://jsfiddle.net/d3xtyv89/
dropdown.options = function(data) {
var self = this;
var newOptions = ""; //create one objec to save new options
$.each(data, function(ix, val) {
newOptions += '<option value="' + val + '">' + val + '</option>';
// data.push(option);
});
self.html(newOptions);
}
I have some JavaScript Arrays that are used to generate HTML selection fileds and then to also make the option a user has selected as the selected opton in the generated Selection list.
I have a working example for a basic JavaScript array. I need help with a more complex JS array though.
function buildFormSelection(optionArray, selectedOption){
var optionsHtml = '';
for(var i = 0; i < optionArray.length; i++){
optionsHtml += "<option value='" + optionArray[i] + "' "
+ (selectedOption == optionArray[i] ? "selected='selected'" : "")
+ ">" + optionArray[i] + "</option>";
}
return optionsHtml;
};
var typesArray = ['Other', 'SugarCRM', 'Magento', 'Design'];
console.log(buildFormSelection(typesArray, 'SugarCRM'));
This generates this HTML output...
<option value='Other'>Other</option>
<option value='SugarCRM' selected='selected'>SugarCRM</option>
<option value='Magento'>Magento</option>
<option value='Design'>Design</option>
Here is a JSFiddle to show it working. http://jsfiddle.net/jasondavis/4twd8oz1/
My issue is I now need to have the same functionality on a more complex array like this one below. It has an ID and a Name Value...
var milestonesArray = [
['1','Milestone 1'],
['2','milestone 2'],
]
Using similar code as my function above, I need to pull in a user's selected value from a database for example if they have saved the value of 2 then it should select selection option of 2 and show the text milestone 2 from a selection that looks like this...
<option value='1'>milestone 1</option>
<option value='2' selected='selected'>milestone 2</option>
I am not sure how to properly build a JavaScript array that can handle a key and value like this and make my function work with the milestone array.
Any help please?
What you need to do just add another array index to your function like so:
function buildFormSelection(optionArray, selectedOption){
var optionsHtml = '';
for(var i = 0; i < optionArray.length; i++){
optionsHtml += "<option value='" + optionArray[i][0] + "' "
+ (selectedOption == optionArray[i][0] ? "selected='selected'" : "")
+ ">" + optionArray[i][1] + "</option>";
}
return optionsHtml;
};
Where optionArray[i][0] is the value and optionArray[i][1] is the text.
JSFiddle
Answers with lots of code is usually frowned on but this is a trivial solution as #imtheman pointed out in his answer. But not everything needs to be so concise.
function makeOptionElement(value, title, selected) {
var option = document.createElement('option');
option.value = value;
if (selected) {
option.setAttribute('selected', 'selected');
}
option.innerHTML = title;
return option;
}
function dataToOptions(data, selectedIndex) {
var selectList = document.createElement('select');
data.forEach(function(item, index) {
var isSelected = (index === selectedIndex);
var option = makeOptionElement(item[0], item[1], isSelected);
selectList.appendChild(option);
});
return selectList;
}
Essentially, each time you call the array with your variables to be printed, you are calling the contents of the array in the position specified between the [ ]. It may be another array. That you can access as you would any other array. So, it would be:external_array[extrenal_array_index][internal_array_index]
I have a <select> that I added with JQ ,
its loadded all options from a class (value + data) list return by $.ajax call, and load it to a div.
My code:
varTempDiv+= '<select class="selectFromList" width="200">';
$.each(data.d, function (index) {
varTempDiv+= '<option value="' + this.value >+ '">' + this.txtName + '</option>';
});
varTempDiv+= '</select>';
$("#loadedDiv").html(varTempDiv);
It work fine at all in chrome ,
but in ie8 its froze to some second append to list length.
The length start with 100 to 1000+ items.
How can i fix that things?
Thanks!!
Try using native for loop instead of jQuery.each. It should give you significant performance improvement especially if you have so many items in your array. Take a look at this comparison http://jsperf.com/jquery-each-vs-for-loop/69.
What happens if you change
varTempDiv+= '<option value="' + this.value >+ '">' + this.txtName + '</option>';
to
varTempDiv+= '<option value="' + this.value + '">' + this.txtName + '</option>';
Thousand items in a select also seems unusable, maybe you should consider a different design.