Как я могу получить значение из тега select с параметром и optgroups?

Question

Эй, мне нужно получить значение из тега выбора с 2 optgroups и некоторыми опциями

вот мой HTML:

<select id="rackSelect" @dataChange="rack=$event" label="Rack Units">
  <option disabled selected>Choose a Rack Unit</option>
  <optgroup label="Rack Space">
    <option value = "quarter">1/4 Rack</option>
    <option value = "half">1/2 Rack</option>
    <option value = "full" >Full Rack</option>
  </optgroup>
  <optgroup label="Individual Rack Units">
    <option value="1" data-rack_cost="65">1 Rack Unit</option>
    <option value="2" data-rack_cost="130">2 Rack Units</option>
    <option value="3" data-rack_cost="195">3 Rack Units</option>
    <option value="4" data-rack_cost="260">4 Rack Units</option>
    <option value="5" data-rack_cost="325">5 Rack Units</option>
    <option value="6" data-rack_cost="390">6 Rack Units</option>
    <option value="7" data-rack_cost="455">7 Rack Units</option>
    <option value="8" data-rack_cost="520">8 Rack Units</option>
    <option value="9" data-rack_cost="585">9 Rack Units</option>
  </optgroup>
</select>

Мне нужно значение переключателя.

rackBeautiful(): string | undefined {
  switch (this.rack) {
    case 'quarter':
      this.rack = "quarter";
      break;

    case 'half':
      return 'half rack';
    case 'full':
      return 'full rack';
    default:
      if (isNaN(this.rack))
        return 'immer default?';
      else
        return ' Rack Units';
  }
}

И я использую vue.js без jQuery.

У кого-нибудь есть идея?

Answer 1

v-model даст вам только выбранное значение, если вы хотите optgroup, вы можете сделать это следующим образом.

var app = new Vue({
  el: '#app',
  data:{
    item:'',
    group:''
  },
  methods:{
    getVal: function(){
      var rack = document.querySelector("#rackSelect");
      this.item = rack.value;
      this.group =  rack.options[rack.selectedIndex].parentNode.label;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select id="rackSelect" @change="getVal" label="Rack Units" >
                  <option disabled selected>Choose a Rack Unit</option>
                  <optgroup label="Rack Space">
                    <option value = "quarter">1/4 Rack</option>
                    <option value = "half">1/2 Rack</option>
                    <option value = "full" >Full Rack</option>
                  </optgroup>
                  <optgroup label="Individual Rack Units">
                    <option value="1" data-rack_cost="65">1 Rack Unit</option>
                    <option value="2" data-rack_cost="130">2 Rack Units</option>
                    <option value="3" data-rack_cost="195">3 Rack Units</option>
                    <option value="4" data-rack_cost="260">4 Rack Units</option>
                    <option value="5" data-rack_cost="325">5 Rack Units</option>
                    <option value="6" data-rack_cost="390">6 Rack Units</option>
                    <option value="7" data-rack_cost="455">7 Rack Units</option>
                    <option value="8" data-rack_cost="520">8 Rack Units</option>
                    <option value="9" data-rack_cost="585">9 Rack Units</option>
                  </optgroup>
                </select>
                
<div>Group : {{group}}</div>
<div>Item : {{item}}</div>
</div>

Answer 2

Вот решение, использующее vueJs: просто добавьте v-модель и добавьте метод @change:

<select id="rackSelect" v-model="selectedVal" @change="showVal" label="Rack Units">***your options***</select>

Пример jsFiddle: https://jsfiddle.net/49gptnad/3966/

Answer 3

Поскольку вы используете vue.js, вы можете использовать директиву v-model, которая создает для вас двустороннюю привязку данных.

Итак, добавьте это так:

<select id="rackSelect" @change="updateVal" label="Rack Units" v-model="selected">
   <!-- your options go here -->
</select>

А затем объявите переменную selected в вашем экземпляре Vue:

new Vue({
  el: '...',
  data: {
    selected: ''
  }
  methods: {
    updateVal(){
      switch (this.selectedVal) {
        case 'quarter':
          this.selectedVal = "quarter";
          break;

        case 'half':
          return 'half rack';
        case 'full':
          return 'full rack';
        default:
        if (isNaN(this.selectedVal))
          return 'immer default?';
        else
          return ' Rack Units';
     }
   }
})

---

Редактировать: Вот живая демонстрация - https://jsfiddle.net/vmf8tg5q/

Answer 4

Просто используйте следующее:

var val = document.getElementById('rackSelect').value

Смотрите здесь: https://jsfiddle.net/y8bpjgpc/1/