Select Multiple Values from Listbox in Update (Multiple Listboxes)

[LyaP]

So this is something that has been addressed a couple of different times but not of the Javascript solutions work for me. I have an update page that has 3 listboxes with multi-select enabled. I need the update page to display the multiple selections in the listbox separately and not in one long sentence separated by commas. Here are two of the different scripts I have tried to use, neither has worked. 

 

First:

<script>
// Function for selecting corresponding elements from the list box.
function select_ (){
// get listbox element
var o_els = new Array("EditRecordStatus","EditRecordMarket_Sector","EditRecordDivisions");
for (var k=0; k< o_els.length; k++ ) {
var o_el = document.getElementById(o_els[k]);
// Enable multiselect for listbox
o_el.multiple="multiple";

// get listbox length
var len = o_el.options.length;
// get selected element
var selected = o_el.options[len-1].value;
// verify if selected element contains comas, if yes, do the following
if (selected.indexOf(",") != -1 ){
// Split selected option into array
var m_array = new Array();m_array=selected.split (",");
// Delete last option from the listbox
o_el.options.remove(len-1);
// Go through listbox and select each option, if it is present in array
for( var i=0; i< m_array.length; i++ ){for( var j=0; j< len-1; j++ ){
// Trim spaces while comparing elements from array and listbox
if( m_array.replace(/^s+|s+$/g, '') == o_el.options[j].value ){
o_el.options[j].selected = "selected";
}
}
}
}
}
}
// call select_ funtion when details page is loaded
window.onload = select_;
</script>

 

Second (On this one the 3rd Listbox works but the other two do not):

 

<script type="text/javascript">
 var v_state = "[@field:Status]" ;
 var o_state = document.getElementById("EditRecordStatus") ;
 o_state.multiple = true ;

 function f_listbox() {
  if ( v_state.indexOf(",") > 0 ) {
   for (var i=0 ; i < o_state.options.length; i++ ) {
    if(o_state.value == v_state) {
     o_state.remove(i);
     break ;
    }
   }
   var o_st = v_state.split(", ") ;
   for (var j=0 ; j < o_st.length; j++) {
    for (var i=0 ; i < o_state.options.length; i++ ) {
     if(o_st[j]== o_state.options.value){
      o_state.options.selected = true ;
      break ;
     } 
    }
   }
  }
 }
  window.onload = f_listbox ;
</script>
<script type="text/javascript">
 var v_state = "[@field:Market_Sector]" ;
 var o_state = document.getElementById("EditRecordMarket_Sector") ;
 o_state.multiple = true ;

 function f_listbox2() {
  if ( v_state.indexOf(",") > 0 ) {
   for (var i=0 ; i < o_state.options.length; i++ ) {
    if(o_state.value == v_state) {
     o_state.remove(i);
     break ;
    }
   }
   var o_st = v_state.split(", ") ;
   for (var j=0 ; j < o_st.length; j++) {
    for (var i=0 ; i < o_state.options.length; i++ ) {
     if(o_st[j]== o_state.options.value){
      o_state.options.selected = true ;
      break ;
     } 
    }
   }
  }
 }
  window.onload = f_listbox2 ;
</script>
<script type="text/javascript">
 var v_state = "[@field:Divisions]" ;
 var o_state = document.getElementById("EditRecordDivisions") ;
 o_state.multiple = true ;

 function f_listbox3() {
  if ( v_state.indexOf(",") > 0 ) {
   for (var i=0 ; i < o_state.options.length; i++ ) {
    if(o_state.value == v_state) {
     o_state.remove(i);
     break ;
    }
   }
   var o_st = v_state.split(", ") ;
   for (var j=0 ; j < o_st.length; j++) {
    for (var i=0 ; i < o_state.options.length; i++ ) {
     if(o_st[j]== o_state.options.value){
      o_state.options.selected = true ;
      break ;
     } 
    }
   }
  }
 }
  window.onload = f_listbox3 ;
</script>

 

Thank you for your help!

[MayMusic]

Try this

 

<script type="text/javascript">
var mylist= new Array ("EditRecordStatus","EditRecordMarket_Sector","EditRecordDivisions") ;
var v_state = new Array ("[@field:Status]","[@field:Market_Sector]","[@field:Divisions]") ;
for (var k=0; k<mylist.length; k++){
var m = document.getElementById(mylist[k]) ;
var o_state = document.getElementById(mylist[k]);

m.multiple = true ;
f_listbox();
function f_listbox() {

  if ( v_state[k].indexOf(",") > 0 ) {
  
   for (var i=0 ; i < o_state.options.length; i++ ) {

    if(o_state[i].value == v_state[k]) {
     o_state.remove(i);
     break ;
    }
   }
   var o_st = v_state[k].split(", ") ;
   for (var j=0 ; j < o_st.length; j++) {
    for (var i=0 ; i < o_state.options.length; i++ ) {
     if(o_st[j]== o_state.options[i].value){
      o_state.options[i].selected = true ;
      break ;
     } }
    }
   }
  }
}
  
</script>

 

[aam82]

23 hours ago, LyaP said:

 

Second (On this one the 3rd Listbox works but the other two do not):

 

 

I think this is what's known as global namespace pollution. The quick fix here is to add a number next to every variable in each script, so that all variables are unique to each of your three scripts.

e.g.

v_state

becomes

v_state1 in script 1

v_state2 in script 2

etc.

Edit: I don't think you have to do this for the functions, because the function limits the namespace. 

[aam82]

sorry, I opened this thread before MayMusic replied, but read it later, so I didn't see her post.

[LyaP]

Thank you so much May, that worked!

[LyaP]

On 8/11/2016 at 4:36 PM, MayMusic said:

Try this

 

<script type="text/javascript">
var mylist= new Array ("EditRecordStatus","EditRecordMarket_Sector","EditRecordDivisions") ;
var v_state = new Array ("[@field:Status]","[@field:Market_Sector]","[@field:Divisions]") ;
for (var k=0; k<mylist.length; k++){
var m = document.getElementById(mylist[k]) ;
var o_state = document.getElementById(mylist[k]);

m.multiple = true ;
f_listbox();
function f_listbox() {

  if ( v_state[k].indexOf(",") > 0 ) {
  
   for (var i=0 ; i < o_state.options.length; i++ ) {

    if(o_state[i].value == v_state[k]) {
     o_state.remove(i);
     break ;
    }
   }
   var o_st = v_state[k].split(", ") ;
   for (var j=0 ; j < o_st.length; j++) {
    for (var i=0 ; i < o_state.options.length; i++ ) {
     if(o_st[j]== o_state.options[i].value){
      o_state.options[i].selected = true ;
      break ;
     } }
    }
   }
  }
}
  
</script>

Ok actually it's not working, but it's closer. If I select three options from the listbox when creating the project then go to the update page, the first and last selection are highlighted in the listbox separately, but all three are added to the bottom of the list box separated by commas. You can see the attached image for a better explanation. Any thoughts?

 

[TWIRED]

Got it to work.

There was a small syntax error

Double quotes was missing in script

if( m_array.replace(/^s+|s+$/g, "") == listbox.options[j].value ){

 

But, Now it doesnt highlight ALL the choices, Just 1 selection shows up.

http://www.tripatwork.com/test-multilistbox-submit.html

 

[TWIRED]

http://www.tripatwork.com/test-multilistbox-submit.html