根据选择框的值改变图像大小答案

【问题标题】：changing the image size according to the value of the select box根据选择框的值改变图像大小
【发布时间】：2012-03-31 16:00:43
【问题描述】：

我有一个选择框，其中包含宽度 X 高度格式等选项。在选择宽度和高度时，我必须将下面的图像（在 div 'other' 中）设置为该大小。我尝试了以下代码：

<script src="http://test/sites/js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.target').change(function() {
            $value=document.getElementById('target').value;
            var myArray = $value.split('X'); 
            document.getElementById('other').innerHTML = '<img src="http://test/sites/all/themes/artsy/images/images2.jpeg" width="myArray[0]" height="myArray[1]">';
        });
    });
</script>
<form>
    <select class="target" id="target">
        <option value="20 X 30" selected="selected">20 X 30</option>
        <option value="100 X 150">100 X 150</option>
    </select>
</form>
<div id="other"> 
    <?php echo $value; ?> <img src="http://test/sites/all/themes/artsy/images/images2.jpeg">
</div>

【问题讨论】：

标签： php javascript jquery drupal

【解决方案1】：

我修改了你的javascript代码

 $(document).ready(function() {
$('.target').change(function() {
  $value=document.getElementById('target').value;
var myArray = $value.split('X'); 
document.getElementById('other').innerHTML = '
<img src="http://test/sites/all/themes/artsy/images/images2.jpeg" width="'+myArray[0]+'px" height="'+myArray[1]+'px ">';


});
});

【讨论】：

【解决方案2】：

看起来不错。没有问题可言，除了您没有声明任何像素并且您不正确地引用了 javascript 变量。您需要将宽度和高度属性更改为这样的 ->

width="'+myArray[0]+'px" 
height="'+myArray[1]+'px"

应该可以的。

【讨论】：

【解决方案3】：

稍微修改你现有的代码，用jQuery的“.attr”函数试试这个：

    $('.target').change(function() {
    $value=document.getElementById('target').value;
    var myArray = $value.split('X');
    $('#other').attr("width",myArray[0]);
    $('#other').attr("height",myArray[1]);

【讨论】：

【解决方案4】：

<script>
$(document).ready(function() {
    $('.target').change(function() {
        var pVal = $('#target').val();
        var myArray = pVal.split(' X '); // Note the extra spacing.
        $('#other').html('<img src="http://test/sites/all/themes/artsy/images/images2.jpeg" width="'+myArray[0]+'" height="'+myArray[0]+'">');
    });
});
</script>

Of course, you'll find it easier to do the actual update like this:
    $('#other img').attr('width',myArray[0]).attr('height',myArray[1]);

【讨论】：

【解决方案5】：

HTML

<select name="something" id="resoultion">
  <option value="100_200">100 X 200</option>
  <option value="200_400">200 X 400</option>
  <option value="300_600">300 X 600</option>
</select>
<img src="img.jpg" id="imageID" alt="" />

jQuery

$('#resoultion').change(function() {
 var resolution = $(this).val().split('_');
 var width = resolution[0];
 var height = resolution[1];

 $('#imageID').css({
  width: width,
  height: height
 });
});

【讨论】：