我有一个html表单，如果在下拉列表中选择了一个选项，我会有条件地用javascript隐藏一个字段。javascript条件工作正常，但当重新加载页面时，即使仍然选择了正确的选项，条件也会丢失。

重新创建的步骤：

我有一个js代码将用户输入存储在会话存储中，因为我的用户有时可能需要转到另一个页面，然后再返回表单。

我有一个js代码，可以有条件地隐藏名为price_input_div 在选择字段中选择第三个选项时。

问题：

当我单击第三个选项时price_input_div 字段是隐藏的，但当重新加载页面时，即使第三个选项仍处于选中状态，该字段仍会再次出现（第三个选项仍处于选中状态，因为我正在会话存储中保存该值）。

重新加载页面后，当我选择另一个选项，然后再次选择第三个选项时price_input_div 场再次被隐藏。

HTML表单：

<p class="form-row form-row-wide">
<label for="select_price_option">Price option<span class="required"> *</span></label>
<select name="select_price_option" id="select_price_option" />
<option disabled selected value> Please select one</option>
<option>Total fee</option>
<option>Starting fee</option>
<option>I need more information</option>
</select>
</p>

<p class="form-row form-row-wide" id="price_input_div">
<label for="quote_price_input">Enter your price</label>
<input type="text" name="quote_price_input" id="quote_price_input" class="input-text"/>
</p>

<p class="form-row form-row-wide">
<label for="message_to_customer">Enter your message<span class="required"> *</span></label>
<textarea name="message_to_customer" id="message_to_customer" minlength="30" class="input-text"></textarea>
</p>

在会话存储中保存和获取字段值的Js代码：

// Save custom checkout fields to session storage
(function ($) {
    // Run on page load
window.onload = function() {
    var quote_price_input = sessionStorage.getItem("quote_price_input");
    var message_to_customer = sessionStorage.getItem("message_to_customer");
    var select_price_option = sessionStorage.getItem("select_price_option");

    if(quote_price_input !== null) {
    document.getElementById(\'quote_price_input\').value = quote_price_input;
      } else
    document.getElementById(\'quote_price_input\').value = "";

    if(select_price_option !== null) {
        var sel = document.getElementById(\'select_price_option\');
        var opts = sel.options;
        for (var opt, j = 0; opt = opts[j]; j++) {
            console.log(opt.innerHTML);
            if (opt.innerHTML == select_price_option) {
              sel.selectedIndex = j;
              break;
            }
        }
      }

    if(message_to_customer !== null) {
    document.getElementById(\'message_to_customer\').innerHTML = message_to_customer;
      } else
    document.getElementById(\'message_to_customer\').innerHTML = "";
};

// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
    var quote_price_input = document.getElementById(\'quote_price_input\');
    var message_to_customer = document.getElementById(\'message_to_customer\');
    var select_price_option = document.getElementById(\'select_price_option\');

    if(quote_price_input !== null) {
        sessionStorage.setItem(\'quote_price_input\', $(\'#quote_price_input\').val());
    }

    if(select_price_option !== null) {
        sessionStorage.setItem(\'select_price_option\', $(\'#select_price_option\').val());
    }

    if(message_to_customer !== null) {
        sessionStorage.setItem(\'message_to_customer\', $(\'#message_to_customer\').val());
    }
};
})(jQuery);

要有条件隐藏的js代码price_input_div 字段：

(function ($) {
$("#select_price_option").change(function() {
  if ($(this).val() == "I need more information") {
    $(\'#price_input_div\').hide();
  } else {
    $(\'#price_input_div\').show();
  }
});
$("#select_price_option").trigger("change");
})(jQuery);

我想要price_input_div 即使在页面重新加载后仍要隐藏的字段I need more information 仍处于选中状态。

我也尝试了以下代码，但没有成功：

// Conditionally show price
(function ($) {
window.onload = function() {
$("#select_price_option").change(function() {
  if ($(this).val() == "I need more information") {
    $(\'#price_input_div\').hide();
  } else {
    $(\'#price_input_div\').show();
  }
});
$("#select_price_option").trigger("change");
}})(jQuery);

任何帮助都将不胜感激。

// Conditionally show price
(function ($) {
  window.onload = function() {

  if ($("#select_price_option").val() == "I need more information") {
   $(\'#price_input_div\').hide();
  }

$("#select_price_option").change(function() {
  if ($(this).val() == "I need more information") {
    $(\'#price_input_div\').hide();
  } else {
    $(\'#price_input_div\').show();
  }
 });
 }})(jQuery);

<select name="select_price_option" id="select_price_option" />
<option disabled selected> Please select one</option>
<option value="Total fee">Total fee</option>
<option value="Starting fee">Starting fee</option>
<option value="I need more information">I need more information</option>
</select>