我有一个select表单,里面有各种酒店房间,如普通房间,家庭房间,豪华房间,行政房间等等,每个房间都有相应的价格,比如普通房间,我将设置300美元的价格。
在选择表单的右侧每次我选择我们说普通房间右侧输入文本字段它将显示价格$300。所以基本上我使用java脚本代码var ordinary=document.getElementByID("ord").value
,这样我就可以设置价格,所以,var ordinary= 3500
。下一个是从变量普通的值显示在输入文本字段每次我选择在选择表单的普通房间,但我要怎么做呢?
下面是代码
<script language="javascript" type="text/javascript">
var ordinary= document.getElementById("ord").value;
var ordinary= 5300;
</script>
<form action="insert.php" method="post">
<table align="center"><tr><td>
<font face="Arial, Helvetica, sans-serif">RESERVATIONS</font>
</td></tr><hr color="#00CC99"/> <br/>
</table>
<table border="0" align="center">
<tr>
<th align="justify"> Name:   </th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th align="justify"> Contact Number: </th>
<td><input type="text" name="contact"></td>
</tr>
<tr>
<th align="justify">Room Type: </th>
<td>
<select name="roomType">
<option value="---">---------------------------</option>
<option value="Ordinary " id="ord">Ordinary</option>
<option value="Family ">Family</option>
<option value="Superior ">Superior</option>
<option value="Deluxe ">Deluxe</option>
<option value="Corner Suite King">Corner Suite King</option>
<option value="Executive ">Executive</option>
<option value="Executive Suite">Executive Suite</option>
<option value="Grand Executive">Grand Executive</option>
<option value="Presidential ">Presidential</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<th align="justify">AddOn Services: </th>
</tr>
</table>
</form>
给出roomType
的select
和id
,然后使用这个
var e = document.getElementById("roomType");
var desiredValue = e.options[e.selectedIndex].value;
options的值应该是脚本所需的数据。您应该调用select元素的selectedIndex
而不是options
,否则我们都必须键入大量代码…不好玩
<select name="roomType" id="roomType">
<option value="---">---------------------------</option>
<option value="5300">Ordinary</option>
<option value="SomePrice">Family</option>
<option value="SomePrice">Superior</option>
<option value="SomePrice">Deluxe</option>
<option value="SomePrice">Corner Suite King</option>
<option value="SomePrice">Executive</option>
<option value="SomePrice">Executive Suite</option>
<option value="SomePrice">Grand Executive</option>
<option value="SomePrice">Presidential</option>
</select>