保持选择

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;