JavaScript - 从下拉框中读取
我需要能够从页面上的下拉框中读取从中获取值并且就是这样（现在）我目前拥有此代码。
的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>
chrome中的错误
萤火
非常感谢，在回答时，请尝试解释我做错了什么，为什么错误以及正确的方法。
由于
2 个答案:
答案 0 :(得分：3)
将您的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[#]其中#是表单的索引可行但是令人困惑......
进一步更改 - 如果您使用的方式完全与问题相同，则可以删除除其中一个表单之外的所有表单 - 因为它们实际上什么都不做......只是围绕整个页面（只使用单一表单的内容 - 使用上面的方法获取更改的值仍然可以工作，因为它不依赖于表单！
答案 1 :(得分：1)
所有表单的名称都为 form1 ，因此document.form1实际上会返回<form>个元素的数组。您可以单独访问它们，例如document.form1[0].values作为第一个表单。要维护通用函数，您需要将当前 select 元素（发出onchange事件的元素）传递给函数，以便函数找到正确的 form1 < / em>操作。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？