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:

• one value for the language name
• one is a link to the language icon (img)
• one is the language level.

in database "SQL" i have 4 columns

• 1. id
• 2. sprachename
• 3.spracheicon
• 4.sprachlevel

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>

CodePudding user response：

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>

CodePudding user response：

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 - second language
English - mother tongue
English - second language

or something similar, and were hoping that you could control this by setting multiples values on each option.

A standard approach to this kind of thing is as follows:

1. Define a table in your database which lists all the possible options, and acts as a reference from which you can populate your select.

e.g You would have a LanguageOptions table. A few rows of the contents would look like this:

This means in your <select> you can use the ID from this table to identify which language option is chosen:

<select class="multi-select" name="" id="" multiple v-model="sprachen">
  <option value="1">Arabic - mother tongue</option>
  <option value="2">Arabic - B1</option>
  <option value="3">English - mother tongue</option>
  <option value="4">English - B1</option>
</select>

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.