jquery. Flytta mellan listor

PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Lägg ett bokmärke på hela tråden
Skapa nytt inlägg   Svara på inlägget
Visa föregående ämne :: Visa nästa ämne  
Startad av: Meddelande
Biasse



Medlem i: 5214 dagar

Status: Offline



#741880
Inlägg Skrivet: 2017-10-05 12:37      Ämne: jquery. Flytta mellan listor Citera

Är det möjligt att ändra i detta exempel så man dubbelklickar på det val man gör så det flyttas till nästa lista och därmed ta bort knapparna?

KOD:
1:
 
2:
<head>
3:
    <title>Move Items from One MultiSelect List To Another</title>
4:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
5:
    <script type="text/javascript">
6:
        $(function () { function moveItems(origin, dest) {
7:
    $(origin).find(':selected').appendTo(dest);
8:
}
9:
 
10:
    function moveAllItems(origin, dest) {
11:
    $(origin).children().appendTo(dest);
12:
}
13:
 
14:
    $('#left').click(function () {
15:
    moveItems('#sbTwo', '#sbOne');
16:
});
17:
 
18:
    $('#right').on('click', function () {
19:
    moveItems('#sbOne', '#sbTwo');
20:
});
21:
 
22:
});
23:
    </script>
24:
</head>
25:
 
26:
<body>
27:
    <h2>Move Items From One List to Another</h2>
28:
    <select id="sbOne" multiple="multiple">
29:
        <option value="1">Alpha</option>
30:
        <option value="2">Beta</option>
31:
        <option value="3">Gamma</option>
32:
        <option value="4">Delta</option>
33:
        <option value="5">Epsilon</option>
34:
    </select>
35:
 
36:
    <select id="sbTwo" multiple="multiple">
37:
        <option value="6">Zeta</option>
38:
        <option value="7">Eta</option>
39:
    </select>
40:
 
41:
    <br />
42:
 
43:
    <input type="button" id="left" value="<" />
44:
    <input type="button" id="right" value=">" />
45:
    <input type="button" id="leftall" value="<<" />
46:
    <input type="button" id="rightall" value=">>" />
47:
</body>
48:
 
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
harald_b
Moderator



Medlem i: 4194 dagar
Från: Tavesta
Status: Offline



#741881
Inlägg Skrivet: 2017-10-06 00:43      Ämne: Citera

Gör dessa två det du önskar?


KOD:
1:
   $('#sbOne').on('dblclick', function () {
2:
      moveItems('#sbOne', '#sbTwo');
3:
   });
4:
   $('#sbTwo').on('dblclick', function () {
5:
      moveItems('#sbTwo', '#sbOne');
6:
   });

När man dubbelklickar så blir det först ett vanligt enkelklick, vilket kan påverka det valet man gjort
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Biasse



Medlem i: 5214 dagar

Status: Offline



#741882
Inlägget är accepterad som det rätta svaret Skrivet: 2017-10-06 08:26      Ämne: Citera

Jag fick till det så här Cool Bugar och bockar.

KOD:
1:
 
2:
<html>
3:
<head>
4:
 
5:
<script src="http://code.jquery.com/jquery-latest.js"></script>
6:
<script type="text/javascript">
7:
 
8:
$(function ()
9:
{
10:
  function moveItems(origin, dest)
11:
  {
12:
  $(origin).find(':selected').appendTo(dest);
13:
  }
14:
 
15:
  $('#sbOne').dblclick(function()
16:
  {
17:
  moveItems('#sbOne', '#sbTwo');
18:
});
19:
 
20:
  $('#sbTwo').dblclick(function()
21:
  {
22:
  moveItems('#sbTwo', '#sbOne');
23:
  });
24:
});
25:
 
26:
</script>
27:
 
28:
</head>
29:
 
30:
<body>
31:
 
32:
<select id="sbOne" multiple="multiple">
33:
<option value="1">Alpha</option>
34:
<option value="2">Beta</option>
35:
<option value="3">Gamma</option>
36:
<option value="4">Delta</option>
37:
<option value="5">Epsilon</option>
38:
</select>
39:
 
40:
<select id="sbTwo" multiple="multiple"></select>
41:
   
42:
</body>
43:
</html>
44:
 
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Visa tidigare inlägg:   
Skapa nytt inlägg   Svara på inlägget
PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Hoppa till:  
Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic