Preselecting multiple options

Question

Hi there, 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>&nbsp;</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'>&nbsp;<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'>&nbsp;</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'>&nbsp;<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)
    );
   }

  }
 });
}

Answer 1

I would suggest changing your last line to be something like this:

$("#selEditRegion_" + trade_alert_id + "[value*='" + thisval + "']").attr("selected","selected");

Answer 2

Here you have the solution. The problem was overall that you were not specifying "option" which is the element (not "select") whose value we were looking for:

http://www.jsfiddle.net/dactivo/7RjH3/

var res="4^Caribbean,8^Middle East";
var trade_alert_id=1;
$.each(res.split(','), function(){
        var thisval = this.split("^")[0]

        $('#selEditRegion_' + trade_alert_id + ' option[value=' + thisval + ']').attr('selected','selected');
});

Answer 3

You can use $.map() to get an array from the values, then .val() on an <select multiple> will accept an array, like this:

var vals = $.map(res.split(','), function(e){ return e.split("^")[0]; });
$('#selEditRegion_' + trade_alert_id).val(vals);

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:

$('#selEditRegion_something[value*=\'' + thisval + '\']')

When it should be like this to select the <option> children by value:

$('#selEditRegion_something [value*=\'' + thisval + '\']')

You can test it here.