Question

嗨我想制作我想要的选择选项如果有人选择它改变图像大小的选项当前我使用输入框输入大小如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>

Answer 1

您可以使用以下内容获取选择的值：

var e = document.getElementById("dimen");
var myDimen = e.options[e.selectedIndex].value;

之后，您必须将值与某些尺寸相关联。例如。 1代表100 * 90,2代表200 * 120等

希望这有帮助。

Answer 2

更改选择后，页面会重新加载。表单获取选择并查看所选值，最后打印好图片！

<!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>

为SELECT元素选择ONCHANGE

2 个答案: