changing div according to the list value using jquery

Question

I want to change the width and height of a div by selecting the values from the list

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

What are you having trouble with? You don't seem to have any code written at all. — Blender, Jul 02 '13 at 07:32
You have the same **ID** for the `select` and `div`. **ID** must be unique. — Vucko, Jul 02 '13 at 07:34
You will find what you need here in jquery, too. http://stackoverflow.com/questions/628508/how-to-update-div-when-on-select-change-in-jquery — , Jul 02 '13 at 07:52

Olrac · Answer 1 · 2013-07-02T08:57:02.643

2

Try my answer:

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

edited Jul 02 '13 at 08:57

answered Jul 02 '13 at 07:56

Olrac

1,527
2
10
22

score 1 · Answer 2 · answered Jul 02 '13 at 07:36

1

Try this

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

Fiddle http://jsfiddle.net/hFg7d/

answered Jul 02 '13 at 07:36

Rohan Kumar

40,431
11
76
106

score 0 · Accepted Answer · answered Jul 02 '13 at 07:35

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

score 0 · Answer 4 · answered Jul 02 '13 at 07:36

Here you have an approach with 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);
    });
});

Does using `each` make sense here? – Rohan Kumar Jul 02 '13 at 07:41 — Rohan Kumar, Jul 02 '13 at 07:41

score 0 · Answer 5 · answered Jul 02 '13 at 08:03

you just need to call the change() event on the listbox element and change the length and width of the target element.here is the working example

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>

changing div according to the list value using jquery

5 Answers5