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.
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>
it seems you haven't called the onChange="javascript:updat eSelects() ;" function for the other 3 selects ... check again !
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That was a huge help! Thanks Leakim971.