Link to home
Start Free TrialLog in
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

Avatar of Sandeep Kothari
Sandeep Kothari
Flag of India image

it seems you haven't called the onChange="javascript:updateSelects();" function for the other 3 selects ... check again !
Avatar of dale_abrams
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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That was a huge help! Thanks Leakim971.