Question

我在保持分区持续隐藏方面遇到问题。我的javascript函数正在工作，它改变了分区样式显示，但是在我保存更改并稍后返回页面后，即使我在select中选择了应该保持分区隐藏的选项，分区也是可见的

这是我的HTML代码：

<select name="cancelation" class="dropdown" id="dropdownRefundOption">
    <option value="refundable">Refundable</option>
    <option value="non-refundable">Non-Refundable</option>
</select>
<div class="row cancelationDaysRow" id="divisionRefundOption"> <span class="no-margin-left">Up to</span>
    <div class="input-holder">
        <input name="cancelationDays" id="cancelation" title="<?php echo $this->__('Cancelation days') ?>" placeholder="<?php echo $this->__('30') ?>" value="30" class="input-text input-text_inner" type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')" maxlength="3" />
    </div> <span>days before the starting date of this tour</span>
</div>

这是我的JS脚本：

<script type = "text/javascript" >

var dropdownRefOpt = document.getElementById("dropdownRefundOption");
var divRefOpt = document.getElementById("divisionRefundOption");

dropdownRefOpt.onchange = function () {
    if (dropdownRefOpt.value == "non-refundable") divRefOpt.style.display = 'none';
    else divRefOpt.style.display = 'block';
};

</script>

Answer 1

因此，当页面加载时，服务器端需要设置正确的状态，您需要触发在页面运行时设置元素状态的代码。

因此，在设置后触发onchange事件。

dropdownRefOpt.onchange = function(){ /* your code here */ };
dropdownRefOpt.onchange();

或将代码移动到方法并调用它。

function yourCode () { /* your code here */ }
dropdownRefOpt.onchange = yourCode;
yourCode();

返回页面javascript后，分区不会保持隐藏状态

1 个答案: