Question

我有一个带有两个单选按钮（购买，租赁）和两个选择列表（最低价格，最高价格）（下方）的表单。

当您选择购买单选按钮时，它会调用其JavaScript，下拉选项将更改为购买价格（£100000，£200000等）。当您选择“租用”单选按钮时，它再次调用它的JavaScript并显示租赁价格（250英镑，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属性。

示例：

您选择了购买并选择了min = 100和max = 200。
您从买入变为卖出。现在lastMin = 100，lastMax = 200
你改回购买。您知道最后的值是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;

选择保持选择

2 个答案: