Avatar of dale_abrams
dale_abrams
 asked on

jQuery Multiselect

I have a few multiselects that I'm trying to manipulate through jQuery and having some trouble.

3 multiselects are for individual items.
1 multiselect for global items.
all multiselects have the exact same options within.

If a user changes the selected items in the global multi, I need to loop through the 3 multi's and clear and then select the same options.

I am able to get the values into an array of the items that are selected in the global correctly, but when I go to try and set the same options in the single multi's, nothing is happening and I am not getting any JS error messages.        
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

<p>multi 1<br>
<select name="mvv1" id="mvv1">
<option value="temp1">temp1</option>
<option value="temp2">temp2</option>
<option value="temp3">temp3</option>
</select></p>

<p>multi 2<br>
<select name="mvv2" id="mvv2">
<option value="temp1">temp1</option>
<option value="temp2">temp2</option>
<option value="temp3">temp3</option>
</select></p>

<p>multi 3<br>
<select name="mvv3" id="mvv3">
<option value="temp1">temp1</option>
<option value="temp2">temp2</option>
<option value="temp3">temp3</option>
</select></p>

<p>global multi<br>
<select name="global_mvv" id="global_mvv" onChange="javascript:updateSelects();">
<option value="temp1">temp1</option>
<option value="temp2">temp2</option>
<option value="temp3">temp3</option>
</select></p>

<script type="text/javascript">
function updateSelects(){

var numItems = 3;  
var selectedElements = []; 

$('#global_mvv :selected').each(function(i, selected){
	selectedElements[i] = [];
	selectedElements[i][1] = $(selected).index(); 
});

// loop through items and set to global items selected								
$(numItems).each(function(j){

$(selectedElements).each(function(i){
$('#mvv'+j+' option').eq(selectedElements[i][1]);
});

});

};
</script>

Open in new window

AJAXScripting LanguagesJavaScript

Avatar of undefined
Last Comment
dale_abrams

8/22/2022 - Mon
Sandeep Kothari

it seems you haven't called the onChange="javascript:updateSelects();" function for the other 3 selects ... check again !
dale_abrams

ASKER
Kshna, I only want to call it for the global select as that is the only one that needs to run the JS code on the others.
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
dale_abrams

ASKER
That was a huge help! Thanks Leakim971.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy