1

我想通过从列表中选择值来更改 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>
4

5 回答 5

2

试试我的回答：

$(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);
    });
});

演示小提琴

于 2013-07-02T07:56:06.973 回答
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/

于 2013-07-02T07:36:56.463 回答
0

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>

查询

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

    $('#sizeBox').width(strs[0]);
    $('#sizeBox').height(strs[1]);
}
于 2013-07-02T07:35:08.933 回答
0

在这里，您有一种使用 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);
    });
});
于 2013-07-02T07:36:50.770 回答
0

您只需要在列表框元素上调用change()事件并更改目标元素的长度和宽度。这是工作示例

小提琴

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>
于 2013-07-02T08:03:49.143 回答