为Select元素选择ONCHANGE
Select ONCHANGE for SELECT elements
嗨,我想做一个选择选项,如果有人选择了这个选项,它会改变我当前使用的输入框中的图像大小,比如100*250,然后点击提交,它会更改图像大小,但我想要预定义的图像大小。这样任何人都可以在不写的情况下选择大小。
我想使用这个而不是<input>
<select>
<option value="0" selected="selected">Choose size</option>
<option value="1">100*200</option>
<option value="2">300*600</option>
<option value="3">700*1000</option>
</select>
这是我的PHP代码
<?php
include("connection.php");
if(isset($_GET['title'])){
$page_id = $_GET['title'];
$select_query = "select * from save_data where Title='$page_id'";
$run_query = mysql_query($select_query);
while($row=mysql_fetch_array($run_query)){
$post_id = $row['ID'];
$post_title = $row['Title'];
$post_image = $row['Name'];
?>
<center>
<h2>
<a href="pictures.php?title=<?php echo $post_title; ?>">
<?php echo $post_title; ?>
</a></center>
</h2>
<center><img id="myImage" src="uploads/<?php echo $post_image; ?>" /></center>
<input type="text" id="dimen" name="dimension" />
<input type="submit" value="Submit" Onclick ="splitString()"/>
<?php } }?>
<html>
<body>
<head>
<script type="text/javascript">
function splitString()
{
var myDimen=document.getElementById("dimen").value;
var splitDimen = myDimen.split("*");
document.getElementById("myImage").width=splitDimen[0];
document.getElementById("myImage").height=splitDimen[1];
}
</script>
</head>
</body>
</html>
您可以通过以下方式获取select的值:
var e = document.getElementById("dimen");
var myDimen = e.options[e.selectedIndex].value;
之后,您必须将该值与一些大小相关联。例如,1代表100*90,2代表200*120等。
希望这能有所帮助。
更改选择时,页面将重新加载。表单得到选择并看到所选的值,最终您打印出了好的图片!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>imageRedimention</title>
</head>
<body >
<form name="formulaire" id="formulaire" method="get" action="">
<select name="select" onChange="submit()">
<option value="0" >Choose size</option>
<option value="1" >100*200</option>
<option value="2" >300*600</option>
<option value="3" >700*1000</option>
</select>
<br>
<?php
if($_GET['select'] == '1'){
echo '<img src="Capture.png" width="100" heigth="200" alt="mon image">';
}else if($_GET['select'] == '2'){
echo '<img src="Capture.png" width="300" heigth="600" alt="mon image">';
}else if($_GET['select'] == '3'){
echo '<img src="Capture.png" width="700" heigth="1000" alt="mon image">';
}else{
echo '<img src="Capture.png" width="200" heigth="300" alt="mon image">';
}
?>
</form>
</body>
</html>
相关文章:
- 选择标记onchange不适用于移动设备
- 从Document调用onchange函数.已准备好从更新中预先选择的项目
- onchange选择get value并执行查询,然后在同一页面上显示结果
- 正在读取<p: 选择一个菜单/>在onchange回调中
- 如何在 PHP 中使用 OnChange 事件的下拉列表中选择一个选项后,对大量数据行设置分页
- onchange Jquery 在使用选择器更改值时不起作用
- 根据其他onchange函数来选择在onchange中运行哪个函数
- 使用 onChange 清除多个选择和复选框
- 如何在onchange事件中的两个函数之间进行选择
- JavaScript,PHP,onchange选择框不起作用
- 使用AJAX和PHP进行Onchange选择
- Onchange选择而不刷新
- HTML5验证不工作在OnChange选择框表单提交
- onChange选择不工作
- Javascript的onchange选择不起作用
- jQuery onchange选择选项
- Onchange选择运行功能
- 如何使用jquery获取onChange选择菜单中选项的值
- dom事件-JavaScript onchange选择绑定问题
- 使用javascript和php创建onChange选择下拉菜单,但它'It’不起作用