I can’t find a solution that works for me. I’m trying to preselect multiple values in a multiple select box depending on what JSON returns.
JSON returns the following string from a coldfusion cfc:
"4^Caribbean,8^Middle East,5^North America"
The string is represented by “res” in the code below:
$.each(res.split(','), function(){
var thisval = this.split("^")[0]
var thistext = this.split("^")[1].toString();
$('#selEditRegion_' + trade_alert_id + '[value*=\'' + thisval + '\']').attr('selected','selected'); // I borrowed this from somewhere but it doesn't work
.../snip
EDITED HERE TO EXPLAIN A SECONDARY ISSUE
The code suggested by Nick DOES work, but only if I place an alert before running it. See annotations in the code below. I hope it doesn’t scare anyone off.
function getTradeAlertListings(oArg) {
var use_offset = oArg.use_offset || true
var paging_offset = oArg.paging_offset || global_paging_offset
var user_id = oArg.user_id || parseInt(0)
var listings_noresults = "No records found";
global_paging_offset = paging_offset;
$.getJSON("/cfcs/main.cfc?method=getTradeAlertListings&returnformat=json&queryformat=column", {"user_id":user_id,"paging_offset":global_paging_offset,"use_offset":use_offset}, function(res,code) {
var listings_p = "";
var listings_s = "";
var v_count = parseInt(0);
var v_perpage = parseInt(10);
var v_listing_class = "listingCaption";
var v_object_type = "ajax";
var v_onclick = 'return hs.htmlExpand(this,{objectType:"ajax"})';
listings_noresults = "No Trade Alerts Found.";
loadSelect('regions','region','selAddRegion'); //loads the select for "Add New Alert" functionality
// section displaying "Add New Trade Alert" form controls.
listings_s += "<div>Trade Alerts</div><hr>"
listings_s += "<table border='0' cellspacing='0' cellpadding='4'>"
listings_s += "<tr><td colspan='5'>Create a New Trade Alert</td></tr>"
listings_s += "<tr><td>Keywords</td><td>Region/s</td><td>Buy Leads</td><td>Sell Leads</td><td>Companies</td><td> </td></tr>"
listings_s += "<tr><td><input type='text' id='txtAddKeyword'></td>"
listings_s += "<td><select multiple id='selAddRegion'></select><div id='regionResult'></div></td>"
listings_s += "<td valign='top'><input type='checkbox' id='chkBuyLeads' value='1'></td><td><input type='checkbox' id='chkSellLeads' value='1'></td><td valign='top'><input type='checkbox' id='chkCompanies' value='1'></td><td><input type='button' id='" + user_id + "' class='btnAddAlert' value='Create'> <input type='button' class='btnCloseAddTradeAlert' value='Close'> <span class='addAlertResult></span></td></tr>"
// Section displaying current trade alerts existing in database
listings_s += "<tr><td colspan='5'> </td></tr>"
listings_s += "<tr><td colspan='5'>Current Alerts</td></tr>"
listings_s += "<tr>"
if(res && res.ROWCOUNT == 0){
listings_s += "<td colspan='5'>" + listings_noresults + "</td>";
}else{
// Compile & display pagination
v_old_offset = parseInt(paging_offset) - parseInt(v_perpage);
v_new_offset = parseInt(paging_offset) + parseInt(v_perpage);
v_remaining = parseInt(res.DATA.REMAINING[0]);
listings_p += "<table><tr>";
if(v_old_offset > -1) {
listings_p += "<td><a href='#' class='paging' id='previous^" + v_old_offset + "^trade_alerts^" + user_id + "'>Prev</a></td>";
}
if(v_remaining > v_perpage) {
listings_p += "<td><a href='#' class='paging' id='next^" + v_new_offset + "^trade_alerts^" + user_id + "'>Next</a></td>"
}
listings_p += "</tr></table>"
$("#pagination").html(listings_p);
// Loop through JSON and display the listings
for(var i=0; i<res.ROWCOUNT; i++)
{
listings_s += "<td><input type='text' id='txtEditKeyword_" + res.DATA.RECORD_ID[i] + "' value='" + res.DATA.KEYWORDS[i] + "'></td>"
listings_s += "<td><select multiple class='selEditRegion' id='selEditRegion_" + res.DATA.RECORD_ID[i] + "' ></select><div id='regionResult'></div></td>" //style='height:20px'
listings_s += "<td><input type='checkbox' id='chkEditBuyLeads_" + res.DATA.RECORD_ID[i] + "' value='1'></td><td><input type='checkbox' id='chkEditSellLeads_" + res.DATA.RECORD_ID[i] + "' value='1'></td><td><input type='checkbox' id='chkEditCompanies_" + res.DATA.RECORD_ID[i] + "' value='1'></td><td><input type='button' class='btnEditAlert' id='" + res.DATA.RECORD_ID[i] + "^" + res.DATA.USER_ID[i] + "' value='Update'> <input type='button' class='btnCloseEditAlert' id='" + res.DATA.RECORD_ID[i] + "' value='Close'> <span class='addAlertResult></span></td> <span id='editAlertesult_" + res.DATA.RECORD_ID[i] + "'></span>"
listings_s += "</tr></table>";
// Load the region drop down for listing in current loop
loadSelect('regions','region','selEditRegion_' + res.DATA.RECORD_ID[i]); // this works ok
// Check checkboxes as appropriate. NOTE: This doesn't work either
if(res.DATA.BUYING_LEADS_FLAG[i] == 1){
$("#chkEditBuyLeads_" + res.DATA.RECORD_ID[i]).attr({'checked':'checked'});
}
if(res.DATA.SELLING_LEADS_FLAG[i] == 1){
$("#chkEditSellLeads_" + res.DATA.RECORD_ID[i]).attr({'checked':'checked'});
}
if(res.DATA.COMPANIES_FLAG[i] == 1){
$("#chkEditCompanies_" + res.DATA.RECORD_ID[i]).attr({'checked':'checked'});
}
}
selectAlertRegions(res.DATA.RECORD_ID[i]); // This is original trouble spot. Doesn't work without an alert in the called function.
$("#adminResult").html(listings_s);
//selectAlertRegions(res.DATA.RECORD_ID[i]); // doesn't work here either
}
/*for(var i=0; i<res.ROWCOUNT; i++){
selectAlertRegions(res.DATA.RECORD_ID[i]);
}*/ // doesn't work here either
})
}
function selectAlertRegions(trade_alert_id) {
$.getJSON("/chinabuy-new/cfcs/main.cfc?method=getAlertRegions&returnformat=json",{"id":trade_alert_id},function(res,code) {
if(res.length != 0) {
alert(res); // HERE! if I leave this alert in, it works!
$.each(res.split(','), function() {
var thisval = this.split("^")[0]
var thistext = this.split("^")[1].toString();
var vals = $.map(res.split(','), function(e){ return e.split("^")[0]; });
$('#selEditRegion_' + trade_alert_id).val(vals);
});
}
});
}
function loadSelect(entity,textCol,retField) { // This works fine
var method;
var thisid;
var thisval;
var textCol = textCol.toUpperCase();
if(entity == 'regions'){
method = 'getRegions';
}else if(entity == 'categories'){
method = 'getCategories'
}else if(entity == 'countries'){
method = 'getCountries'
}
$.getJSON("/cfcs/system.cfc?method=" + method + "&returnformat=json&queryformat=column",{"for_select":true},function(res,code) {
if(res){
for(var i=0; i<res.ROWCOUNT; i++){
thisid = parseInt(res.DATA.RECORD_ID[i]);
thisval = res.DATA[textCol][i].toString();
$('#' + retField).append(
$('<option></option>').val(thisid).html(thisval)
);
}
}
});
}
You can use
$.map()to get an array from the values, then.val()on an<select multiple>will accept an array, like this:You can test it out here.
The reason your current version doesn’t work is you’re missing a space, it ends up being this:
When it should be like this to select the
<option>children by value:You can test it here.