Question

你好，请教一个问题。如何js获取控件值，进行运算后返回到另一个控件中，最好页面不刷新，不会ajax

reserve.php中有一个select控件，一个span，还有$price变量，因为不会模板，页面是php和html混编的。我想要选择2就可以把2*$price赋给span，选择不同的select就得到对应的price。请问这个功能怎么用js实现，页面要不要刷新，用到ajax吗？求详细代码，谢谢！
<select id="room" name="room">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<span id="price" name="price">想要得到select的值*$price</span>

Answer 1

把 select 改为

<select id="room" name="room" onchange="document.getElementById('price').innerHTML = <?php echo $price; ?> * parseInt(this.options[this.selectedIndex].value);">

把 $price 预先放到 id=price 的 span 中作为默认值

<span id="price" name="price"><?php echo $price; ?></span>

给你几点建议，这种在元素上直接使用 onchange，onclick 的方式称为内联脚本，个人非常不赞成这种写法，实际上也是不规范的。尽量将 HTML (.php, .html)，CSS (.css)，Javascript (.js) 分离。

像你现在做的这个房间预订工程，建议你先不要考虑 Javascript，因为预订页面是对外的，任何人都有可能在浏览器关闭 Javascript。你所有这些前端验证和计算在服务器端都是必须二次进行的。所以先使用 POST/GET 形式的 form 将各个功能搞定，确认在没有 Javascript 的情况下网页可以正常运行，之后再使用 Javascript 对页面进行用户体验的改进。

追问

嗯，有道理！那我现在这个功能应该怎么实现，reserve.php的值都是前面的页面传过来的，用户在这边还有个选择，单纯php/html下怎么实现两个控件的交互？求指教~

追答

你指的两个控件交互其实是页面刷新（POST或GET）后在 PHP 中的计算。

<?php
if(isset($_GET["hotel_id"])) {
// 这里处理之前 onclick 传过来的 $_GET
}

$total_price = 0;
// 注意下面 form 的 method 为 POST，同样 POST 到当前的 reserve.php
if(isset($_POST["room_type"]) && isset($_POST["room"])) {
// 这里处理下面的两个 select
// 下面的 98, 118, 148 都应该从一个价格数组中得到
switch($_POST["room_type"]) {
case 1: $total_price = 98 * $_POST["room"];
case 2: $total_price = 118 * $_POST["room"];
case 3: $total_price = 148 * $_POST["room"];
}
}
?>
<form action="reserve.php" method="post">
<select name="room_type">
<option value="1">经济房 ￥98</option>
<option value="2">双床房 ￥118</option>
<option value="3">大床房 ￥148</option>
</select>
<select name="room">
<option value="1">一间</option>
<option value="2">两间</option>
<option value="3">三间</option>
</select>
<input type="submit" />
</form>
<?php
if($total_price) {
// 应该有个房间类型数组，例如 $room_types = array(1=>"经济房", 2=>"双床房", 3=>"大床房");
echo "您预订了".$_POST["room"]."间".$room_types[$_POST["room_type"]]."，总价格为：$total_price";
}
?>

我只是猜测着写的代码，你还要根据实际情况进行调整。不懂的地方你可以直接把代码发给我，我再帮你看看。

追问

在reserve.php界面只有一个选择房间数量的选择框，我怎么把代码发给你呀，代码挺多。QQ？百度Hi？

追答

加我百度 Hi 吧，把相关文件(php, js)打包一下，直接“发送文件”。

Answer 2

只是 显示的话不需要Ajax，在你上面的代码后面加上以下代码：

<script type="text/javascript">
document.getElementById("room").onchanged=function(){
var priceA=<?php echo $price ?>;
document.getElementById("price").innerHTML=parseInt(document.getElementById("room").value)*priceA;
}
</script>