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';
  }
}

我在没有jQuery的情况下使用vue.js。

有人有想法吗？

Answer 1

这是使用vueJs的解决方案：只需添加v-model并添加方法@change：

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

jsFiddle示例：https://jsfiddle.net/49gptnad/3966/

Answer 2

由于您使用的是vue.js，因此您可以使用v-model指令，该指令为您创建双向数据绑定。

所以像这样添加：

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

然后在Vue实例中声明selected变量：

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 3

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 4

只需使用以下内容：

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

见这里：https://jsfiddle.net/y8bpjgpc/1/

如何从带有option和optgroups的select标签中获取Value？

4 个答案: