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 () {
    $(document).on("change", "#sizeBoxSelect", function () {
        var $this = $('select#sizeBoxSelect option:selected'),
            iWidth = parseInt($this.val().split(",")[0]),
            iHeight = parseInt($this.val().split(",")[1]);

        $("#sizeBox").width(iWidth).height(iHeight);
    });
});

DEMO FIDDLE

Answer 2

试试这个

$(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 3

http://jsfiddle.net/Jdbyk/1/

HTML

<select onchange="Change()" id="sizeSel">
<option selected>Please Select</option>
<option>HP to decide</option>
<option value="45x40">45x40</option>
<option value="50x20">50x20</option>
<option value="50x30">50x30</option>
<option value="63x30">63x30</option>
<option value="75x40">75x40</option>
</select>
<div style="border:1px solid red;" id="sizeBox"></div>

JQUERY

function Change()
{
    var boxsize = $('#sizeSel').val();
    var strs = boxsize.split("x");

    $('#sizeBox').width(strs[0]);
    $('#sizeBox').height(strs[1]);
}

Answer 4

Here你有一个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>

JAVASCRIPT：

$('#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 5

你只需要在listbox元素上调用 change（）事件并更改目标元素的长度和宽度。这是工作示例

Fiddle

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

使用jquery根据列表值更改div

5 个答案: