如何篩選使用模型數據

天兒真好所有文本下拉列表中，如何篩選使用模型數據

有，我一直在思索了一下這裏有一個問題 - 我們有一個下拉框在我們的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

如何篩選使用模型數據

回答

相關問題