not - jQuery moviendo los valores de MultiSelect a otro MultiSelect
select2 set selected value (8)
Así que tengo un cuadro MultiSelect con valores x que necesito la capacidad de mover a otro cuadro MultiSelect y viceversa.
<select class="boxa" multiple="multiple">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="boxb" multiple="multiple">
</select>
Debe mover todos o uno de los valores de boxa a boxb en un clic de botón, también con la capacidad de mover los valores de boxb a boxa.
¿Tiene jQuery algo como esto o es un fragmento de código personalizado?
Aquí va mi código html
<div>
<select multiple id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<a href="#" id="add">add > ></a>
</div>
<div>
<select multiple id="select2"></select>
<a href="#" id="remove">remove < <</a>
</div>
y código Javascript
$("#add").click(function(){
$("#select1 option:selected").remove().appendTo($("#select2"));
})
$("#remove").click(function(){
$("#select2 option:selected").remove().appendTo($("#select1"));
})
Asegúrese de que importó el archivo jquery.js .
Hay un plugin jquery llamado crossSelect que parece hacer lo que quieres.
jQuery no tiene esto incorporado, deberías encontrar un complemento que te guste y usarlo, o escribir el tuyo. (Y, por supuesto, no tiene que usar jQuery para escribir o usarlo, podría implementarlo en javascript puro si lo desea)
Intente lo siguiente (tomado de blog.jeremymartin.name/2008/02/… )
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$(''#add'').click(function() {
return !$(''#select1 option:selected'').remove().appendTo(''#select2'');
});
$(''#remove'').click(function() {
return !$(''#select2 option:selected'').remove().appendTo(''#select1'');
});
});
</script>
<style type="text/css">
a {
display: block;
border: 1px solid #aaa;
text-decoration: none;
background-color: #fafafa;
color: #123456;
margin: 2px;
clear:both;
}
div {
float:left;
text-align: center;
margin: 10px;
}
select {
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<div>
<select multiple id="select1">
<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>
<a href="#" id="add">add >></a>
</div>
<div>
<select multiple id="select2"></select>
<a href="#" id="remove"><< remove</a>
</div>
</body>
</html>
Si bootstrap-duallistbox Bootstrap, encontré bootstrap-duallistbox bastante útil.
- Filtrable
- Sensible
- Localizable
- Altamente personalizable
- Parece bien mantenido
Si está bien con el complemento, este complemento funciona bien.
Tuve el mismo problema pero encontré una forma de evitarlo.
<div>
<select multiple id="select1">
<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>
</div>
<div>
<select multiple id="select2"></select>
</div>
jquery
$(''#select1'').click(function () {
return !$(''#select1 option:selected'').remove().appendTo(''#select2'');
});
$(''#select2'').click(function () {
return !$(''#select2 option:selected'').remove().appendTo(''#select1'');
});
Si desea un botón, agregue un complemento >> y haga clic en el selector aquí.
$().ready(function() {
$(''#add'').click(function() {
return !$(''#select1 option:selected'').remove().appendTo(''#select2'');
});
$(''#remove'').click(function() {
return !$(''#select2 option:selected'').remove().appendTo(''#select1'');
});
});
$(''#boxa option'').appendTo(''#boxb'');