I have a very tricky question and I should work long hours on this problem and look for a solution.
Suppose I have a multiple select and there are more options, each option has 3 values:
in database "SQL" i have 4 columns
If I have a language then select 3 values should be in different columns in MYSQL (language name value should be in language name column and the link value should also be in its own column, etc.)
So how could I do that?
<select
class="multi-select"
name=""
id=""
multiple
v-model="sprachen"
>
<option
value="Arabic"
value="Muttersprache"
value="https://bilder.pcwelt.de/4204696_620x310_r.jpg"
>
Arabisch
</option>
<option
value="Englisch"
value="B1"
value="https://bilder.pcwelt.de/4204696_620x310_r.jpg"
>
Englisch
</option>
</select>
You can't do it like that I see 2 possible solutions
1 JSON
<select class="multi-select" name=""
id=""
multiple
v-model="sprachen">
<option value='{language:"Arabic", level: "Muttersprache", image: "https://bilder.pcwelt.de/4204696_620x310_r.jpg"}' >Arabisch</option>
...
</select>
2 comma separated value
<select class="multi-select" name=""
id=""
multiple
v-model="sprachen">
<option value='Arabic,Muttersprache,https://bilder.pcwelt.de/4204696_620x310_r.jpg' >Arabisch</option>
...
</select>
You can't have multiple value attributes in one option. Only one value can be submitted.
It seems you're looking to be able to support different variations of the main options, e.g.
Arabic - mother tongue
Arabic - Level B1
English - mother tongue
English - Level B1
or something similar, and were hoping that you could control this by setting multiple values on each option.
A standard approach to this kind of thing is as follows:
select. Crucially it also has a unique ID for each row, to identify that option specifically.e.g. You would have a LanguageOptions table. A few rows of the contents would look like this:
| ID | Description | Lang | Level | Image |
|---|---|---|---|---|
| 1 | Arabic - mother tongue | AR | M | https://bilder.pcwelt.de/4204696_620x310_r.jpg |
| 2 | Arabic - Level B1 | AR | B1 | https://example.com/1.jpg |
| 3 | English - mother tongue | EN | M | https://example.com/2.jpg |
| 4 | English - Level B1 | EN | B1 | https://example.com/3.jpg |
This means in your <select> you can use the ID from this table to identify which language option is chosen:
So then when the form is submitted and the values sent back to the server, you can record which option IDs the user chose by using that single value, and later if you want to output the descriptions against somewhere else, you can JOIN the LanguageOptions table to the User options table using SQL.