I was wondering can we put html table value into dropdown value ?

<select name="contact" id="contacts">
  <option value="Ernst">Company1</option>
  <option value="Island"> Company2</option>
  <option value="Laughing"> Company3</option>
  <option value="Magazzini"> Company4</option>
</select>

can we display html table into select options instead company1, company2, company3

CodePudding user response：

Perhaps datatables is the easiest way to achieve what you are looking for

CodePudding user response：

If you don't mind styling, just values in Vue :

new Vue({
  el: '#demo',
  data() {
    return {
      contacts: [{company: 'a', contact: 'a', country: 'a'}, {company: 'b', contact: 'b', country: 'b'}, {company: 'c', contact: 'c', country: 'c'}],
      selected: null
    }
  },
  computed: {
    allOptions() {
      return this.contacts.map(o => {
        return {name: o.company   ' '  o.contact   ' '   o.country}
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select v-model="selected">
    <option disabled :value="null">Company Contact Country </option>
    <option v-for="(item, i) in allOptions" :key="i">
      {{item.name}}
    </option>
  </select>
  {{ selected }}
</div>