Auswahlliste in einem String speichern

[Marc9025]

@oliverio
vielen Dank, dass hat soweit geklappt.
Würde es auch gehen wenn ich z.B Wert1 und Wert2 anklicken und dann beide werte im Datenpunkt geschrieben werden mit einem Trennzeichen.

edit
Wenn man die Maus gedrückt hält und dann Wert1 und Wert2 berührt funktioniert es.
Würde das auch mit jeweils einzahlend anklicken gehen ?
Auf dem Handy ist es Perfekt geht das so auch am PC ?

Ich habe noch eine 2 Frage
Könnte man Wert1 anzeigen lassen aber in den Datenpunkt etwas anders übertragen.

[OliverIO]

@marc9025

1. Klar kann man alle programmieren. Ich hab jetzt mal ein basic select element des browsers genommen. im internet gibt es auch entsprechend viele ersatz elemente, die die funktionalität nachahmen. aber zusammen mit vis muss man das dann individuell anpassen.
   du kannst ja mal schauen ob du so was im internet findest (also konkreten html/javascript code), ich schaue dann wie aufwändig es ist das anzupassen.
   hier ein vorschlag
   https://github.com/ehynds/jquery-ui-multiselect-widget

2. ja das geht auch, dazu müsste man dann die interpretation von values anpassen.
   Aktuell kennt er ja nur eine Liste von Werten.
   Das würde dann so aussehen

<select id="mySelect"  onchange="myFunction(this)" multiple="multiple">
</select>
<script>
    var datapoint="0_userdata.0.test.test1";
    var selectedvalue = "<%= dp['0_userdata.0.test.test1'] %>";
    var selectid="mySelect";
    var values= [
        {"display":"Wert1",value:"w1"},
        {"display":"Wert2",value:"w2"},
        {"display":"Wert3",value:"w3"},
        {"display":"Wert4",value:"w4"}
        ];
    values.map(el=>$("#"+selectid).append($('<option>', {
        value: el.value,
        text: el.display,
        selected:selectedvalue.split("|").includes(el.value)
    })));
    function myFunction(el) {
        vis.setValue(datapoint,$(el).val().join("|"));
    }
</script> 

[Marc9025]

@oliverio
vielen vielen Dank für deine Mühe.
Es klappt super
Aus deinem Link das Demo Projekt
https://ehynds.github.io/jquery-ui-multiselect-widget/
das wäre doch schon Perfekt
Aber nur wenn das nicht zu viel Aufwand ist.

[OliverIO]

@marc9025

probier mal hier.
das mit dem widget war sogar noch einfacher, da genau das vorgecshlagene bereits in vis enthalten ist (allerdings in einer seeeehr alten version) zur wauswahl der widgets.
kleine schwierigkeit ist, das das multiselect bei jedem klick sich schließt und du für die wahl weitere elemente das immer erneut öffnen musst.
problem ist, sobald ein wert in einen datenpunkt geschrieben wird, wird das widget komplett neu erzeugt und dabei wird es geschlossen.

<select id="mySelect" multiple="multiple" onchange="myFunction(this)">
</select>
<%= dp['0_userdata.0.test.test1'] %>
<script>
    var datapoint="0_userdata.0.test.test1";
    var selectedvalue = "<%= dp['0_userdata.0.test.test1'] %>";
    var selectid="mySelect";
    var values= [
        {"display":"Wert1",value:"w1"},
        {"display":"Wert2",value:"w2"},
        {"display":"Wert3",value:"w3"},
        {"display":"Wert4",value:"w4"}
        ];
    values.map(el=>$("#"+selectid).append($('<option>', {
        value: el.value,
        text: el.display,
        selected:selectedvalue.split("|").includes(el.value)
    })));
    var $mySelect  = $('#mySelect').multiselect();
    function myFunction(el) {
        debugger;
        vis.setValue(datapoint,($(el).val()||[" "]).join("|"));
    }
</script> 

[Marc9025]

@oliverio
ja soweit ist es super.
Stimmt es schließt bei jedem klick was es etwas schwierig macht, wenn man mal mehr anklicken möchte

Jetzt ist es so das, dass Ergebnis angezeigt wird. Kann man das ausblenden ? Ich habe da nämlich ziemlich lange Namen

[OliverIO]

@marc9025
Sorry, vergessen zu entfernen.
Einfach Zeile drei löschen.

[Marc9025]

@oliverio
super, vielen dank
gibt es den eine Möglichkeit den "Fehler mit dem schließen beim klicken" zu beheben ?

[OliverIO]

@marc9025
ne leider mit der basisfunktionalität nicht und ohne da noch was größers dazuzuprogrammieren.
das ist die funktionsweise des widgets, das sobald eine änderung des datenpunkts erfolgt sich das ding neu aufbaut.
ansonsten müsste man noch eine bestätigung mit einbauen, das der code weiß wann fertig ist. hm das könnte ich mal noch probieren.
dann würde automatisch am ende noch ein element eingefügt werden, das "fertig" heißt. erst dann würde der datenpunkt geschrieben werden.

[Marc9025]

@oliverio
das wäre natürlich mega wenn das gehen würde.

[OliverIO]

@marc9025

so hier.
Den display-Wert von fertig darfst du Ändern, den value-Wert von fertig nicht.

<select id="mySelect" multiple="multiple" onchange="myFunction(this)">
</select>
<script>
    var datapoint="0_userdata.0.test.test1";
    var selectedvalue = "<%= dp['0_userdata.0.test.test1'] %>";
    var selectid="mySelect";
    var values= [
        {"display":"Wert1",value:"w1"},
        {"display":"Wert2",value:"w2"},
        {"display":"Wert3",value:"w3"},
        {"display":"Wert4",value:"w4"},
        {"display":"fertig",value:"fertig"}
        ];
//der letzte eintrag mit fertig muss genau so bleiben, oder der code muss angepasst werden    
    
    values.map(el=>$("#"+selectid).append($('<option>', {
        value: el.value,
        text: el.display,
        selected:selectedvalue.trim().split("|").includes(el.value)
    })));
    var $mySelect  = $('#mySelect').multiselect({
        click: function(event,ui) {
        }
    });
    function myFunction(el) {
        debugger;
        if (($(el).val()||[" "]).includes("fertig")) {
            vis.setValue(datapoint,($(el).val()||[]).filter(el=>el!="fertig").join("|")+" ");
        }
    }
</script> 

[Marc9025]

@oliverio
super es ist fast perfekt
Bei mir zeigt er den Datenpunkt über dem Widget an, kann man den ausblenden ?

[OliverIO]

@marc9025

sollte er nicht. bei mir sieht das so aus

[Marc9025]

@oliverio
tut mir leid das war mein Fehler
Dir vielen Dank für deine Mühe und deine Geduld es ist so wie ich es brauche.