Question

我有3个div，每个div具有不同的ID。基于我拥有的下拉列表的值，我想显示div之一。我创建了函数并调用了它，但是由于某种原因没有发生任何变化。当我使用console.log时，从未记录下拉列表的新值。我不确定是什么引起了问题，将不胜感激。

HTML

<div class="ins-left" id="fifteen">
    <p>$15</p>
</div>

<div class="ins-left" id="thirty">
    <p>$30</p>
</div>

<div class="ins-left" id="fourtyfive">
    <p>$45</p>
</div>

CSS

#fifteen {
    display: none;
}

#thirty {
    display: none;
}

#fourtyfive {
    display: none;
}

JS

var length = document.getElementById('length');
var chosenLength = length.options[length.selectedIndex].value;

var start = document.getElementById('start').innerHTML.split('.').join('').toLocaleLowerCase();
var end = document.getElementById('end').innerHTML.split('.').join('').toLocaleLowerCase();
var time = document.getElementById('time');

time.disabled = true;

function disabled() {
    if (chosenLength.value != "") {
        time.disabled = false;
    }
}

var slotTimes = [];
document.getElementById("length").onchange = function (evt) {
    var timeDistance = evt.target.value;
    var startMoment = moment(start, "h:mm a");
    var endMoment = moment(end, "h:mm a");
    slotTimes = [];

    while (startMoment.isSameOrBefore(endMoment)) {
        slotTimes.push(startMoment.format("h:mm a"));
        startMoment = startMoment.add(timeDistance, 'minutes');
    }

    addDropdown();
    price();
};

function price(){

    if (chosenLength.value === "") {
        document.getElementById('fifteen').style.display = "none";
        document.getElementById('thirty').style.display = "none";
        document.getElementById('fourtyfive').style.display = "none";
    }
    if (chosenLength.value === "30") {
        document.getElementById('fifteen').style.display = "block";
        document.getElementById('thirty').style.display = "none";
        document.getElementById('fourtyfive').style.display = "none";
    }
    if (chosenLength.value === "60") {
        document.getElementById('fifteen').style.display = "none";
        document.getElementById('thirty').style.display = "block";
        document.getElementById('fourtyfive').style.display = "none";
    }
    if (chosenLength.value === "90") {
        document.getElementById('fifteen').style.display = "none";
        document.getElementById('thirty').style.display = "none";
        document.getElementById('fourtyfive').style.display = "block";
    }
}


function addDropdown() {
    var doc = '',
        times = slotTimes,
        i;
    for (i = 0; i < times.length; i++) {
        doc += "<option value='" + times[i] + "'>" + times[i] + "</option>";
    }

    document.getElementById('time').innerHTML = doc;
    disabled();
}

Answer 1

我在这里为您提供了一个简单的工作示例，因此您可以根据以下内容调整代码：

https://codepen.io/brunomont/pen/WmExvV

由于您的HTML并未包含所有内容（例如时间元素），因此我不得不删除了一些损坏的引用。另外，请确保已加载所有依赖项（我注意到您正在使用moment.js）。

我所做的更改是：

在运行JavaScript之前，添加一个document.addEventListener("DOMContentLoaded", function()以确保已加载HTML。
将绑定onChange函数的方式更改为document.getElementById('length').addEventListener('change', function (evt)

基本上，addEventListener比onChange更灵活。您可以在此处了解有关此更改的更多信息：

addEventListener vs onclick

希望它会有所帮助：）

根据下拉值显示div

1 个答案: