如何筛选使用模型数据

天儿真好所有文本下拉列表中，如何筛选使用模型数据

有，我一直在思索了一下这里有一个问题 - 我们有一个下拉框在我们的HTML/JavaScript的（传统，没有JQuery的还）前端，其显示像这样的文本元素的列表：

总容量<500毫升
总容量500毫升 - 1L
总容量1L - 2L
Ť otal容量> 2L

在我们的Java模型，我们所储存的物品的能力 - 所以我们知道CokeBottle是600.00f能力等

我的问题是，没有改造的下拉对象是不仅仅是字符串，我怎么能最好的自动选择一个项目正确的容量，当它被选择在其他地方？所以，当页面被加载到可乐瓶时，它知道默认选择“Total capacity 500ml-1L”？

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

想法？

编辑：我也很乐意考虑一种过滤方法 - 删除那些不符合条件的项目，因为有时我们在这些下拉菜单中会有多达20个元素 - 所以我们可以做任何事情来减少用户的手动工作将受到欢迎。

来源

2013-05-17 f1dave

我还没有这样做过，但一个好方法是将数据容量添加到您的选项元素。由于您不打算重新设计生成选择html的控件，因此您可以在选项值上使用正则表达式，看起来像获取第一个数字将会执行的操作。 – HMR

为什么是Java标记？这与Java有什么关系？ –

这是支持它的模型;但公平的电话，我会删除标签...编辑：或不，因为这太小编辑问题。 – f1dave

你可以尝试这样的东西，你将不得不硬编码容量下拉的容量值，但既然你不能改变那个下拉，我认为这是一个最好的方式。除非你想解析文本并计算值（假设所有文本值的值都可以解析为最小值和最大值）。在这种情况下，您可以根据一组规则为给定文本字符串动态创建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>

这里是可以动态地设置对象的能力为你的情况下有一个页面上的多个容量下拉列表，它会设置对象的能力作为选择元素的属性一些示例代码。请注意，包含& gt的值不会很好地转换，因为option.value转换为> 5，因此您可能必须使用正则表达式来确保包含>和<个字符的选项在其值中被正确转换。

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();

来源

2013-05-17 05:07:41 HMR

感谢队友;虽然它不是一个完美的适合我要解决的问题，但它确实给了我一些关于我可以继续进行此操作的想法。 – f1dave

如何筛选使用模型数据

回答

相关问题