VueJS 2:通过其他选择元素修改选择选项

时间:2017-02-21 21:19:29

标签: javascript vuejs2

我的模板中有四个<div class="form-group"> <label class="col-md-4 control-label" for="language_spanhish">Spanish</label> <div class="col-md-6"> <input id="language_spanish" type="text" data-provide="slider" data-slider-ticks="[0, 1, 2]" data-slider-min="0" data-slider-max="2" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show" onchange="alert('you changed it')" /> </div> </div> 元素。每个后续元素的选项应根据前面的选择而改变。因此,例如,如果您从“汽车” document.getElementById("#language_spanish").getAttribute("data-slider-value"); var getIt = $('#language_spanish').data('slider').getValue(); alert(getIt); spanish.on("slide", function(slideEvt) { console.log(slider.getValue() ); alert(slideEvt.value); }); $('#language_spanish').slider().on('slide', function(ev){ alert("I changed it") }); 中选择“丰田”,则下一个应仅显示丰田车型。我尝试设置它,但AJAX请求永远重复调用。这种形式的最佳模式是什么?

以下是我在模板中的示例:

select

和javascript:

select

那么这里最好的模式是什么?

1 个答案:

答案 0 :(得分:1)

根据您拥有的数据量,您可以直接加载所有模型,然后根据之前的选择对它们进行排序。这样,您不必处理Ajax和更改事件,您可以根据模型获得过滤列表。

您还可以使用另一种处理索引的方法,因为您拥有所提供的每个条目的数据。我为此建立了一个演示。

Step 1: Create multiple <select>-elements
Step 2: Have lists of manufacturers, models, equipment for every possible index
Step 3: Based on the selected previous index, which you map to a model, iterate over the respective list, also enable the <select>-element

演示:http://codepen.io/NikxDa/pen/EZqJpP

享受。