Reputation: 10693
I'm trying to figure out how to create a multiselect form that has two selects that allow you to move criteria into a third select. I did take a look at:
http://www.quasipartikel.at/multiselect/
and
//http://www.erichynds.com/jquery/jquery-multiselect-plugin-with-themeroller-support/ (I'm new, so I can only post one link... :-) )
but they both look like they only allow a one-to-one selection, rather than the two-to-one that I'd like to implement...
Something like this:
<!-- user selects multiple values from this and the selected options are moved to third select onclick -->
<select id="select1" name="select1[]" multiple="multiple">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
<!-- user also selects multiple values from this and the selected options are moved to third select onclick -->
<select id="select2" name="select2[]" multiple="multiple">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<!-- this is the target for the previously selected options -->
<select id="target" name="target[]" disabled>
<!-- all of the selected options from select1 and select2 are placed here onclick -->
</select>
Is this possible? Does anyone have a working example, or a link that illustrates this kind of thing?
Upvotes: 0
Views: 2026
Reputation: 17640
You need a button with an id of 'add"
make selections hit the add button
with this code attached to the button
$('#add').click(function() {
return !$('#select1 option:selected,#select2 option:selected').appendTo('#target');
});
Upvotes: 1
Reputation: 3936
You may be able to tailor this to your needs:
$(function() {
$("#select1, #select2").change(function() {
$("#target").append($(":selected", $(this)).remove());
});
});
It finds the selected item from the dropdown, removes it, and appends it to the target dropdown.
Upvotes: 0