jquery - jqueryを使用してリスト値に応じてdivを変更する

Question

リストから値を選択して div の幅と高さを変更したい

<select id="selectSize">
<option selected>Please Select</option>
<option>45x40</option>
<option>50x20</option>
<option>50x30</option>
<option>63x30</option>
<option>75x40</option>
</select>
<div id="sizeBox"></div>

Answer 1

これを試して

$(function(){
    $('#sizeSel').on('change',function(){
        var dim = $(this).val();
        var wh= dim.split("x");
        $('#sizeBox').css({'width':wh[0]+'px','height':wh[1]+'px'});
    });
});

フィドル http://jsfiddle.net/hFg7d/

Answer 2

ここでは、Jquery を使用したアプローチを示します。

HTML:

<select id="selectBox">
<option selected>Please Select</option>
<option>HP to decide</option>
<option>45x40</option>
<option>50x20</option>
<option>50x30</option>
<option>63x30</option>
<option>75x40</option>
</select>
<div id="sizeBox"></div>

ジャバスクリプト:

$('#selectBox').change(function() {
    $("option:selected", this).each(function () {
        var value = $(this).val();
        var height = value.split('x')[0];
        var width = value.split('x')[1];
        $('#sizeBox').css("width", width);
        $('#sizeBox').css("height", height);
    });
});

Answer 3

リストボックス要素でchange()イベントを呼び出し、ターゲット要素の長さと幅を変更するだけです.hereは実際の例です

フィドル

JS

$('#sizeBox').on('change', function () {
// alert( $(this).html());
var $this = $('Select option:selected');
var length = $this.attr("lt");
var height = $this.attr("ht");
alert(length + ":" + height);
$('#tarDiv').width(height);
$('#tarDiv').height(length);
});

HTML

<select id="sizeBox">
<option selected>Please Select</option>
<option>HP to decide</option>
<option lt="45" ht="40">45x40</option>
<option lt="50" ht="20">50x20</option>
<option lt="50" ht="30">50x30</option>
<option lt="63" ht="30">63x30</option>
<option lt="75" ht="40">75x40</option>
</select>
<div id="tarDiv" class="colorME" style="background-color:green;padding-top:50px;width:100px;height:100px;overflow:auto;">Change ME!!!</div>