Сохранение выбора выбранным

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

Редактировать: Возможно, я неправильно понял ваш вопрос. Если вам интересно, как запомнить выбранные параметры после отправки их на сервер, этот ответ не распространяется на это.

При переключении между покупкой и арендой следите за тем, что было выбрано до изменения. Когда вы вернетесь назад, используйте эту информацию для установки свойства selectedIndex в раскрывающемся списке.

Пример:

1. Вы выбрали покупку и выбрали min = 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;

Answer 2

Если вы отправляете форму, вы, вероятно, захотите сохранить значения в hidden элементах HTML.