尝试在第一次选择时选择一个选项之后显示一个选择选项

Question

我有一个类别的选择标记，我希望在选择类别后显示子类别的第二个选择选项。当我尝试更改元素的样式时，它也一直返回null我认为JS是在元素加载之前应用的，但我不知道如何修复它，任何帮助都将不胜感激，谢谢

<select onchange="displaySubCategory()" onchange="ChangeSubCategory()" id="item-category" required>
<option class="blank-condition-value" value="">Select</option>
<option value="Antiques">Antiques</option>
<option value="Arts & Crafts">Arts & Crafts</option>
<option value="Baby">Baby & Nursery</option>
<option value="Books">Books, comics, magazines & Manga</option>
<option value="Fashion">Fashion</option>
<option value="Collectables">Collectables</option>
<option value="Electronics">Electronics</option>
<option value="Garden & Outdoor">Garden & Outdoor</option>
<option value="Health & Beauty">Health & Beauty</option>
<option value="Home & Furniture">Home & Furniture</option>
<option value="Jewellery">Jewellery & Watches</option>
<option value="Motor Vehicles">Motor Vehicles</option>
<option value="Music">Music & Audio</option>
<option value="Sports & Leisure">Sports, Fitness & Leisure</option>
<option value="Toys & Games">Toys & Games</option>
<option value="Tools & DIY">Tools & DIY</option>
</select>
</div>
<div class="subcategory-box"> 
<label id="subcategory-label" for="subcategories">Item Subcategory:</label>
<select id="subcategories"></select>
.subcategory-box {
position: relative;
display: inline-block;
height: 60px;
bottom: 30px;
left: 35px; 
display: none;
}
function displaySubCategory() { 
const category = document.getElementById('item-category');
const subcat = document.getElementById('subcategory-box');
window.addEventListener('change', (onDOMContentLoaded) => {
subcat.value.style.display ='inline-block'; 
}) ;
};

Answer 1

您有">子类别框"；作为div元素上的一个类，但在js中，您使用document.getElementById访问它。您可以使用document.getElementsByClassName('.subsubscription-box'([0]或document.querySelector('.subjection-box''(.

另一个选项是将DIV元素上的类更改为ID，并更改后续的CSS。

以下是jsfiddle，我在其中实现了答案中提到的所有方法。

https://jsfiddle.net/8kagxhtz/

function displaySubCategory() { 
const category = document.getElementById('item-category');

// Use if you need to check if with id
//const subcat = document.getElementById('subcategory-box');

// If you need to use class on the element 
//const subcat = document.getElementsByClassName('subcategory-box')[0];

// Or use this for class
const subcat = document.querySelector('.subcategory-box');
subcat.style.display ='inline-block'; 
};

Answer 2

首先，为了使代码达到现代标准，不要使用像onchange这样的内联HTML事件属性。将JavaScript与HTML分离。

现在，你提到的错误正在发生，因为你的代码是这样的：

const subcat = document.getElementById('subcategory-box');

但是id没有任何元素。相反，你有这个：

<div class="subcategory-box">

但它有一个class，而不是id。所以你需要这样一行：

const subcat = document.querySelector('.subcategory-box');    

然后，你仍然会有一个错误，因为你这样做：

subcat.value.style.display ='inline-block';

您会得到错误，因为div没有value属性，即使有，style也是元素的属性，而不是它的value。

接下来，这个：

window.addEventListener('change', (onDOMContentLoaded) => {
subcat.value.style.display ='inline-block'; 
}) ;

将onDOMContentLoaded参数传递给change事件处理程序实际上没有意义。

所以我认为你在寻找的是：

// Get references to the DOM elements you'll work with just once
const category = document.getElementById('item-category');
const subcat = document.querySelector('.subcategory-box');
// Set up your events in JavaScript, not in HTML
category.addEventListener("change", displaySubCategory);
category.addEventListener("change", changeSubCategory);
function displaySubCategory() { 
subcat.classList.remove("hidden"); // Remove the CSS that is hiding the element
}
function changeSubCategory() { 
}

/* Separate this into its own class
so you can add/remove it separately
from other styling. */
.hidden {
display: none;
}

<div>
<select id="item-category" required>
<!-- If you don't supply a value, then the value becomes the option's text -->
<option class="blank-condition-value" value="">Select</option>
<option>Antiques</option>
<option>Arts & Crafts</option>
<option value="Baby">Baby & Nursery</option>
<option value="Books">Books, comics, magazines & Manga</option>
<option>Fashion</option>
<option>Collectables</option>
<option>Electronics</option>
<option>Garden & Outdoor</option>
<option>Health & Beauty</option>
<optio>Home & Furniture</option>
<option value="Jewellery">Jewellery & Watches</option>
<option>Motor Vehicles</option>
<option value="Music">Music & Audio</option>
<option value="Sports & Leisure">Sports, Fitness & Leisure</option>
<option>Toys & Games</option>
<optio>Tools & DIY</option>
</select>
</div>
<div class="subcategory-box hidden"> 
<label id="subcategory-label" for="subcategories">Item Subcategory:</label>
<select id="subcategories"></select>
</div>