为Select元素选择ONCHANGE - Select ONCHANGE for SELECT elements

Select ONCHANGE for SELECT elements

本文关键字：ONCHANGE 选择元素 Select | 更新日期: 2023-11-09

嗨，我想做一个选择选项，如果有人选择了这个选项，它会改变我当前使用的输入框中的图像大小，比如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>