JavaScript - 从下拉框中读取
Kyl*_*e93 4 javascript drop-down-menu
我需要能够从页面上的下拉框中读取并从中获取值，仅此而已（目前）我目前拥有此代码。
JavaScript
function main(input)
{
value = getValue();
alert(value);
}
function getValue()
{
var len = document.form1.values.length
var chosen = ""
for (var i = 0; i < len; i++) {
if (document.form1.values[i].selected) {
chosen = document.form1.values[i].value
}
}
return chosen;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shopping Cart</title>
<link href="style.css" title="Style" rel="stylesheet" type="text/css">
<script src="javascript/js.js" type="text/javascript"></script>
</head>
<!-- Start content -->
<body>
<!-- Wrapper to hold all content in -->
<div id="wrapper">
<!-- Top header, site name, moto, all that -->
<div id="header">
<h1>Kyle's Legit Toys</h1>
<h2>We are more legit then 10th.exe</h2>
<h3>#SoundsLegit</h3>
</div>
<!-- Navigation Menu -->
<div id="menu">
<a href="#">Home</a>
<a href="http://itsuite.it.brighton.ac.uk/ks339/sem2/clientValidation.htm">Client Validation</a>
</div>
<!-- Item -->
<div class="first">
<p>Wickedy Walker</p>
<img src="i/car.jpg" width="85%" height="85%" alt="Car" title="#CoolCar">
<p>Cost: £30 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Faster than light car</p>
<img src="i/toycar.jpg" width="85%" height="85%" alt="ToyCar" title="#WickCar">
<p>Cost: £10 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Build stuff crane</p>
<img src="i/crane.jpg" width="85%" height="85%" alt="Toy Crane" title="#SweetCrane">
<p>Cost: £15 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Dynamicaly altered payment -->
<div id="payment">
<p>Payment</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Item -->
<div class="first">
<p>Satch Boogie</p>
<img src="i/guitar.jpg" width="85%" height="85%" alt="Guitar" title="#BeLikeSlash">
<p>Cost: £20 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</form>
</div>
<!-- Item -->
<div class="item">
<p>HaxTop</p>
<img src="i/laptop.jpg" width="85%" height="85%" alt="Laptop" title="#Be1337hax">
<p>Cost: £150 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Train</p>
<img src="i/train.jpg" width="85%" height="85%" alt="Train" title="#ChoChoTrain">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Item -->
<div class="first">
<p>Pedo Bear</p>
<img src="i/teddybear.gif" width="85%" height="85%" alt="Teddy Bear" title="#AwesomeTeddy">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Not a pony bear</p>
<img src="i/bear.jpg" width="85%" height="85%" alt="Teddy Bear" title="#EnvyOfHomies">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Patobo Bear</p>
<img src="i/irl.jpg" width="85%" height="85%" alt="Teddy Bear" title="#NotEvenRacist">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Final footer -->
<div id="footer">
<p>Kyle Strudwick - ks339 - StudentNumber</p>
<p>Some copyright stuff</p>
</div>
</div>
</body>
</html>
铬错误
萤火虫
非常感谢，回答时请尝试解释我做错了什么，为什么错了以及正确的方法。
谢谢
将您的 HTML 更改为：
<select name="values" onchange="main(this)" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
你的功能是：
function main(input)
{
var text = input.options[input.selectedIndex].text; // returns the text ie one / two etc
var value = input.value; // returns the value ie 1 / 2 / 3 etc
}
我已经改变了-我已经更新onchange从main()到main(this)这一变化意味着这就是它传递当前select列表对象的main，这使得访问实际的-功能可按select单从功能上轻松了很多变化-你不必去搜索DOM的选择更改的列表。
javascript 做了什么- 这简化了获取所选选项的过程，现在我们传递了select已更改的实际列表，即input= 正确的选择列表。我们可以使用input.selectedIndex获取当前选中的选项并input.value返回当前选中的值
使用document.forms1不起作用，因为您form1的页面上有多个带有名称的表单- 使用表单的索引document.forms1[#]在哪里#可以工作，但它令人困惑......
进一步的更改- 如果您完全按照您的问题使用它，您可以删除除一个表单之外的所有表单 - 因为它们实际上什么都不做......只需用一个表单包围整个页面（仅内容） - 使用上述获取更改值的方法仍然有效，因为它不依赖于表单！
| 归档时间： |
|
| 查看次数： |
2350 次 |
| 最近记录： |