So I have two multiple select boxes like this
<select id="foo" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="bar" multiple="multiple">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
<option value="4">Opt 4</option>
</select>
<a href="#" onclick="select()">Select</a>
What I'm trying to do is that when 'Select' is clicked, any option in "#bar" that has the same value with an option in "#foo" would be selected. In this case Opt 1 and Opt 2 in "#bar" should be selected. I've no idea why my javascript won't work. I know it must be something very simple. I just can't see it. :( So my Javascript function is as followed:
function select(){
var vals = new Array();
var iter = 0;
$("#foo option").each(function(){
var v = $(this).val();
$('#bar option').each(function(){
if ($(this).val() == v)
{
vals[iter] = v;
iter++;
break;
}
});
});
$("#bar").val(vals);
}
Check this out http://jsfiddle.net/NtF8J/
html
<select multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<select multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<button> random </button>
jquery
$(function(){
$(document.body).delegate(
'select:first', 'change', function(){
$('select:not(:first)').val(
$(this).val()
)
}
)
.delegate(
'button', 'click', function(){
$('select').val([1,2,3,4].filter(function(){return!!Math.round(Math.random() * 1)}))
}
)
});