根据选择框的值更改图像大小

Question

我有一个选择框，其中有宽度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> 

Answer 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 ">'; 


}); 
}); 

Answer 2

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

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

应该这样做。

Answer 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]); 

Answer 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]); 

Answer 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 
}); 
});