Question

G'day all，

我有一个问题，我一直在考虑一下 - 我们的html / javascript（遗留，没有JQuery）前端有一个下拉框，显示一个文本元素列表，如下所示：

总容量＆lt; 500毫升
总容量500ml - 1L
总容量1L - 2L
总容量＆gt; 2L

在我们的Java模型中，我们有一个项目的存储容量 - 所以我们知道CokeBottle的容量是600.00f等。

我的问题是，如果不重新设置下拉对象不仅仅是字符串，我怎样才能在其他地方选择项目时最好自动选择正确的容量？因此，当为CokeBottle加载页面时，它知道默认选择“总容量500ml - 1L”吗？

正则表达式将是这样做的一种方式，但它似乎很脆弱，并且有点混乱以保持前进。

思想？

编辑：我也很高兴考虑过滤方法 - 删除那些不合格的项目，因为有时我们在这些下拉菜单中会有多达20个元素 - 所以我们可以采取的任何措施来减少用户的手工工作欢迎。

Answer 1

你可以尝试像这样，你必须硬编码容量下拉列表的容量值，但由于你无法改变该下拉列表，我认为这是最令人愉快的方式。除非您要解析文本并计算值（假设所有文本值都具有可以解析为min和max的值）。在这种情况下，您可以根据一组规则动态创建myApp.capacityDropdownValues，这些规则为给定的文本字符串提供最小值。

<!DOCTYPE html>
<html>
 <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
 <body>
  <select id="selContainers" onChange="myApp.setCap(this);">
   <option value="can" data-capacity="0.33">Can</option>
   <option value="1l" data-capacity="1">One liter bottle</option>
   <option value="2l" data-capacity="2">Two liter bottle</option>
   <option value="bathTub" data-capacity="500">Bath tub</option>
  </select>

 <select id="cap">
   <option>&gt 500ml</option>
   <option>500ml - 1l</option>
   <option>1l - 2l</option>
   <option>&lt 2l</option>
 </select>
<script type="text/javascript">
var myApp = {};
// this part can go in a seperate js file 
myApp.capacityDropdownValues=[
 {min:0,max:0.5}, 
 {min:0.5,max:1}, 
 {min:1,max:2}, 
 {min:2,max:1/0}
];
// sorry for using inline event binding, if you have
// code that can attach/add event listeners that supports multiple browsers
// I'd advice not to use inline binding.
myApp.setCap = function (el){
    var op=el.options[el.selectedIndex],
    capacity=parseFloat(op.getAttribute("data-capacity")),
    i,caps=document.getElementById("cap");
    for(i=0;i<myApp.capacityDropdownValues.length;i++){
        if(myApp.capacityDropdownValues[i].min<=capacity &&
                myApp.capacityDropdownValues[i].max>=capacity){
            caps.selectedIndex=i;
            return;
        }
    }
    console.log("failed");
}
// set the values on load:
myApp.setCap(document.getElementById("selContainers"));
</script>

 </body>
</html>

下面是一些可以为您动态设置容量对象的示例代码，如果一个页面上有多个容量下拉列表，它会将capacity对象设置为select元素的属性。请注意，包含＆amp; gt的值将无法很好地转换，因为option.value会转换为＆gt; 5因此您可能必须在其上使用正则表达式以确保包含＆gt;的选项和＆lt;其值中的字符被正确翻译。

var myApp = {};
//translations for string to min max values
// if you have values in gallons you can correctly translate that to liters here
myApp.capStringToCapacity={
  '0-500':{min:0,max:0.5},
  '500ml - 1l':{min:0.5,max:1},
  '1l - 2l':{min:1,max:2},
  '2 and up':{min:2,max:1/0}
}
// adds min max values for each option to capacity select
myApp.init=function(){
    var i,j,tmp=[];
    for(i=0;i<myApp.containers.length;i++){
        for(j=0;j<myApp.containers[i].options.length;j++){
            tmp.push(myApp.capStringToCapacity[
              myApp.containers[i].options[j].value]);
        }
        //just add the JS object as property to the select
        myApp.containers[i].capacities=tmp;
    }
}
// set capacity dropdowns to intitialise
myApp.containers=[document.getElementById("cap")];
myApp.init();

如何使用模型数据过滤文本下拉列表

1 个答案: