Jump to content
LyaP

Select Multiple Values from Listbox in Update (Multiple Listboxes)

Recommended Posts

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! :)

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites
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?

 

Listbox Issues.JPG

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...