“更改”事件侦听器不适用于移动设备上的 <select> 元素。 （HTML、JS）

Question

如果另一个

<select>

元素已填写，我正在尝试切换

<select>

元素的禁用属性。它目前在包括 Chrome 和 Firefox 在内的计算机浏览器上完美运行，但是，当我在手机 (Chrome) 上加载网站时，JavaScript 只是不运行。这是我目前的代码，我很想知道这里可能存在什么问题：

HTML：

<label for="booking-options" class="form-label">Booking Options</label>
<select name="booking-options" id="booking-options" class="select-input split-select">
    <option value="">Select an Option</option>
    <option value="natural-classic-set">Natural Classic Set</option>
    <option value="classic-set">Classic Set</option>
    <option value="dramatic-classic-set">Dramatic Classic Set</option>
    <option value="yy-hybrid-set">YY Hybrid Set</option>
    <option value="light-volume-set">Light Volume Set</option>
    <option value="removal">Removal</option>
</select>

<label for="infill" class="form-label">Infill Type</label>
<!-- Automatically disabled until a set is selected -->
<select name="infill" id="infill" class="select-input split-select" disabled>
    <option value="none">None</option>
    <option value="2-week">2 Week Infill</option>
    <option value="3-week">3 Week Infill</option>
</select>

JavaScript：

// Booking and Selecting
const bookingSelectElement = document.getElementById('booking-options');
const infillSelectElement = document.getElementById('infill');
const infillOptions = document.querySelectorAll('#infill > option');

// Runs perfectly on PC. Doesn't do anything on mobile.
bookingSelectElement.addEventListener('change', () => {
    if(bookingSelectElement.value != "" && bookingSelectElement.value != "removal") {
        alert("Alerted on Change"); // Testing Purposes
        infillSelectElement.disabled = false; // Allows infill options to be selected
    } else {
        infillSelectElement.disabled = true; // Disabled infill options
        infillOptions[0].selected = true; // sets infill option to none
    }
})

感谢您的帮助:)

Answer 1

最好使用

setAttribute

和

removeAttribute

方法。这就是设置和删除布尔属性的方法。

if(bookingSelectElement.value != "" && bookingSelectElement.value != "removal") {
    alert("Alerted on Change"); // Testing Purposes
    infillSelectElement.removeAttribute('disabled');
} else {
    infillSelectElement.setAttribute("disabled", "disabled");
    infillOptions[0].selected = true; // sets infill option to none
}