保持選擇

Question

我有一個有兩個單選按鈕（購買，租用）和兩個選擇列表（最低價格，最高價格）（下面）的表單。

當您選擇購買單選按鈕時，它會調用其JavaScript並將下拉選項更改爲購買價格（£100000，£200000等）。當你選擇Renting單選按鈕時，它會再次調用它的JavaScript並顯示出租價格（£250 pw，£500等）。

JavaScript的下面：

if (BuyRent=='buy') { 
    document.SearchForm.MaxPrice.options[0]=new Option("Price (Max)","150000000"); 
    document.SearchForm.MaxPrice.options[1]=new Option("\u00A3100,000","100000"); 
    document.SearchForm.MaxPrice.options[2]=new Option("\u00A3200,000","200000"); 
    document.SearchForm.MinPrice.options[0]=new Option("Price (Min)","0"); 
    document.SearchForm.MinPrice.options[1]=new Option("\u00A3100,000","100000"); 
    document.SearchForm.MinPrice.options[2]=new Option("\u00A3200,000","200000"); 
} else if (BuyRent=='rent') { 
    while (document.SearchForm.MaxPrice.options.length>0) { 
    document.SearchForm.MaxPrice.options[0]=null; 
    } 

    while (document.SearchForm.MinPrice.options.length>0) { 
    document.SearchForm.MinPrice.options[0]=null 
    } 

    document.SearchForm.MaxPrice.options[0]=new Option ("Price (Max)","9999999"); 
    document.SearchForm.MaxPrice.options[1]=new Option("\u00A3250","250"); 
    document.SearchForm.MaxPrice.options[2]=new Option("\u00A3500","500"); 
    document.SearchForm.MinPrice.options[0]=new Option("Price (Min)","0"); 
    document.SearchForm.MinPrice.options[1]=new Option("\u00A3250","250"); 
    document.SearchForm.MinPrice.options[2]=new Option("\u00A3500","500"); 
} 

有沒有辦法告訴每個選項記住它選擇提交表單時？

Answer 1

如果您要提交表單，則可能需要將值存儲在hidden HTML元素中。

Answer 2

編輯：我可能誤解了你的問題。如果您想知道如何在提交給服務器後記住選定的選項，則此答案不會涵蓋該選項。

在購買和租賃之間進行更改時，請密切關注變更前選擇的內容。當您更改後，請使用此信息設置下拉列表的selectedIndex屬性。

實施例：

1. 您選擇買入和選定的分鐘= 100和max = 200。
2. 您從買賣改變。現在lastMin = 100，lastMax = 200
3. 您改回購買。你知道，過去的值分別爲100和200，這樣你就設置相應的下拉菜單中的價值觀

我在實踐中做它的一個演示在這裏：http://jsfiddle.net/VUBQL/。代碼如下所示

var lastSelectedIndexes = { min: -1, max: -1 }; 

//The callback function when BuyRent changes 
function buyRentChanged() { 

    var maxPrice = document.SearchForm.MaxPrice; 
    var minPrice = document.SearchForm.MinPrice; 

    //Save currently selected indexes 
    var selectedIndexes = { 
     min: minPrice.selectedIndex, 
     max: maxPrice.selectedIndex 
    }; 

    var BuyRent = this.value 

    if (BuyRent=='buy') { 

     maxPrice.options[0] = new Option("Price (Max)","150000000"); 
     maxPrice.options[1] = new Option("\u00A3100,000","100000"); 
     maxPrice.options[2] = new Option("\u00A3200,000","200000"); 

     minPrice.options[0] = new Option("Price (Min)","0"); 
     minPrice.options[1] = new Option("\u00A3100,000","100000"); 
     minPrice.options[2] = new Option("\u00A3200,000","200000"); 

    } 
    else if (BuyRent=='rent') { 

     maxPrice.options[0]=new Option ("Price (Max)","9999999"); 
     maxPrice.options[1]=new Option("\u00A3250","250"); 
     maxPrice.options[2]=new Option("\u00A3500","500"); 

     minPrice.options[0]=new Option("Price (Min)","0"); 
     minPrice.options[1]=new Option("\u00A3250","250"); 
     minPrice.options[2]=new Option("\u00A3500","500"); 

    } 

    //Set selected index to the last selected index, if it was set 
    if (lastSelectedIndexes.min !== -1) 
     minPrice.selectedIndex = lastSelectedIndexes.min; 

    if (lastSelectedIndexes.max !== -1) 
     maxPrice.selectedIndex = lastSelectedIndexes.max; 


    //Save the current indexes 
    lastSelectedIndexes.max = selectedIndexes.max; 
    lastSelectedIndexes.min = selectedIndexes.min; 

} 

var radioBoxes = document.SearchForm.BuyRent 
radioBoxes[0].onchange = buyRentChanged; 
radioBoxes[1].onchange = buyRentChanged;