JS找不到HTMLselect
JS can't find HTML select
我正在尝试 select HTML select 和 javascript。不过好像找不到了。
我已经在网上尝试了几个关于这个问题的答案,例如:
等待 window 完全加载:
window.onload = function(){
var opt = document.getElementsByName("productoptions");
console.log(opt.options);
}
并尝试将 js 放在 select 元素之后。是的,我已经多次检查拼写。我想知道,为什么会这样。每次它都把我扔进控制台时——未定义。也许你知道答案 ;)
当前JS代码:
var opt = document.getElementById("typeselector");
if(opt.value === "DVD")
{
let furnitures = document.getElementsByClassName("furniture");
for(let i = 0; i < furnitures.length; i++)
furnitures[i].style.display = "none";
let books = document.getElementsByClassName("book");
for(let i = 0; i < books.length; i++)
books[i].style.display = "none";
}
部分HTML代码,负责HTMLselect部分
<div class="iRow">
<div class="lclass">
<label for="typeselector">Product Category</label>
</div>
<div class="tclass">
<select id="typeselector" name="productoptions">
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
document.getElementsByName returns 数组所以使用 opt[0]
window.onload = function(){
var opt = document.getElementsByName("productoptions");
console.log(opt[0].options);
}
<div class="iRow">
<div class="lclass">
<label for="typeselector">Product Category</label>
</div>
<div class="tclass">
<select id="typeselector" name="productoptions">
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
嗯,你应该为 select 提供一个 onchange
方法。
var opt = document.getElementById("typeselector");
function handleChange(val){
alert(opt.value)
if(opt.value === "DVD")
{
let furnitures = document.getElementsByClassName("furniture");
for(let i = 0; i < furnitures.length; i++)
furnitures[i].style.display = "none";
let books = document.getElementsByClassName("book");
for(let i = 0; i < books.length; i++)
books[i].style.display = "none";
}
}
<div class="iRow">
<div class="lclass">
<label for="typeselector">Product Category</label>
</div>
<div class="tclass">
<select id="typeselector" name="productoptions" onchange="handleChange(this)">
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
尝试使用 (document/Element).querySelectorAll
/(document/Element).querySelector
找到 options/selected 选项:
// get options
const options = document.querySelectorAll("#typeselector option");
console.log(Array.from(options).map(v => v.outerHTML).join(","));
// get selected option
const selectedOption = document.querySelector("#typeselector option:checked");
console.log(selectedOption);
// get options (from selector name)
const optionsFromNamedSelector = document.querySelectorAll("[name='productoptions'] option");
console.log([...optionsFromNamedSelector].map(v => v.outerHTML).join(",")); // spread instead of Array.from
// get selected option (from selector name)
const selectedOptionFromNamedSelector = document.querySelector("[name='productoptions'] option:checked");
console.log(selectedOptionFromNamedSelector);
// add handler for change
document.addEventListener("change", evt => {
if (evt.target.name === "productoptions") {
const selectedOption = evt.target.querySelector("option:checked");
console.clear();
console.log(`You selected: ${selectedOption.textContent} (value: ${selectedOption.value})`);
}
});
body {font: normal 12px/15px verdana, arial}
<div class="iRow">
<div class="lclass">
<label for="typeselector">Product Category</label>
</div>
<div class="tclass">
<select id="typeselector" name="productoptions">
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
getElementsByName 方法returns 节点集合。可以通过索引号访问节点。索引从 0 开始。在您的情况下,您可以使用
访问 select 元素
var opt = document.getElementsByName('productoptions');
console.log('productoptions:', opt[0].options);
建议您使用 id 属性而不是 name 属性来处理这些事情,因为 HTML5 已经弃用了 name 属性中的一些元素。
我正在尝试 select HTML select 和 javascript。不过好像找不到了。 我已经在网上尝试了几个关于这个问题的答案,例如:
等待 window 完全加载:
window.onload = function(){
var opt = document.getElementsByName("productoptions");
console.log(opt.options);
}
并尝试将 js 放在 select 元素之后。是的,我已经多次检查拼写。我想知道,为什么会这样。每次它都把我扔进控制台时——未定义。也许你知道答案 ;)
当前JS代码:
var opt = document.getElementById("typeselector");
if(opt.value === "DVD")
{
let furnitures = document.getElementsByClassName("furniture");
for(let i = 0; i < furnitures.length; i++)
furnitures[i].style.display = "none";
let books = document.getElementsByClassName("book");
for(let i = 0; i < books.length; i++)
books[i].style.display = "none";
}
部分HTML代码,负责HTMLselect部分
<div class="iRow">
<div class="lclass">
<label for="typeselector">Product Category</label>
</div>
<div class="tclass">
<select id="typeselector" name="productoptions">
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
document.getElementsByName returns 数组所以使用 opt[0]
window.onload = function(){
var opt = document.getElementsByName("productoptions");
console.log(opt[0].options);
}
<div class="iRow">
<div class="lclass">
<label for="typeselector">Product Category</label>
</div>
<div class="tclass">
<select id="typeselector" name="productoptions">
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
嗯,你应该为 select 提供一个 onchange
方法。
var opt = document.getElementById("typeselector");
function handleChange(val){
alert(opt.value)
if(opt.value === "DVD")
{
let furnitures = document.getElementsByClassName("furniture");
for(let i = 0; i < furnitures.length; i++)
furnitures[i].style.display = "none";
let books = document.getElementsByClassName("book");
for(let i = 0; i < books.length; i++)
books[i].style.display = "none";
}
}
<div class="iRow">
<div class="lclass">
<label for="typeselector">Product Category</label>
</div>
<div class="tclass">
<select id="typeselector" name="productoptions" onchange="handleChange(this)">
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
尝试使用 (document/Element).querySelectorAll
/(document/Element).querySelector
找到 options/selected 选项:
// get options
const options = document.querySelectorAll("#typeselector option");
console.log(Array.from(options).map(v => v.outerHTML).join(","));
// get selected option
const selectedOption = document.querySelector("#typeselector option:checked");
console.log(selectedOption);
// get options (from selector name)
const optionsFromNamedSelector = document.querySelectorAll("[name='productoptions'] option");
console.log([...optionsFromNamedSelector].map(v => v.outerHTML).join(",")); // spread instead of Array.from
// get selected option (from selector name)
const selectedOptionFromNamedSelector = document.querySelector("[name='productoptions'] option:checked");
console.log(selectedOptionFromNamedSelector);
// add handler for change
document.addEventListener("change", evt => {
if (evt.target.name === "productoptions") {
const selectedOption = evt.target.querySelector("option:checked");
console.clear();
console.log(`You selected: ${selectedOption.textContent} (value: ${selectedOption.value})`);
}
});
body {font: normal 12px/15px verdana, arial}
<div class="iRow">
<div class="lclass">
<label for="typeselector">Product Category</label>
</div>
<div class="tclass">
<select id="typeselector" name="productoptions">
<option value="DVD">DVD-Disc</option>
<option value="Book">Book</option>
<option value="Furniture">Furniture</option>
</select>
</div>
</div>
getElementsByName 方法returns 节点集合。可以通过索引号访问节点。索引从 0 开始。在您的情况下,您可以使用
访问 select 元素var opt = document.getElementsByName('productoptions');
console.log('productoptions:', opt[0].options);
建议您使用 id 属性而不是 name 属性来处理这些事情,因为 HTML5 已经弃用了 name 属性中的一些元素。