Question

我有一个下拉列表，其中有一个像素值，下面是一个带有一些数据的div div有一些宽度和高度，但我需要做的是当我选择任何值时假设我选择350px，那么div的大小应该相应地自动调整。一世不知道怎么做那个引用我任何链接，以便我可以从那里得到帮助。我正在为谷歌或最近一小时的谷歌提供任何帮助。

这是html

              <td>
                <select name="sizi_pixel" id="drp">
                    <option value="1">100 Pixels</option>
                    <option value="2">200 Pixels</option>
                    <option value="3">350 Pixels</option>
                    <option value="4">450 Pixels</option>
                    <option value="5">600 Pixels</option>
                </select>
               </td>

这是我要自动调整大小的div

               <div style=" border-width:3px;border-style:solid;border-color:#ff9900; height:400px; width:300px">

                    <input class="color" value="999">
                            <input class="color" value="999">
                            <input class="color" value="999">
               </div>

任何帮助将不胜感激

Answer 1

为您的div添加一个id，并为列表视图的change事件添加一个事件监听器。每次引发事件时，您都可以更改列表的大小

<script>
    $(function() {
        $("#drp").change(function() {
            $("#rect").width($(this).val() + "px");
        });
    });
</script>

您必须在页面中包含jquery并修改列表的val以匹配宽度

Answer 2

如果您有其他问题可以随意询问，这是一个工作示例：

Jsfiddle DEMO：http://jsfiddle.net/kPFry/

<html>
<head>

<style>
    input {

        position: relative;
        width: 90%;

    }
</style>

<script>

function chng_div(src_id,div_id){

    var src_obj = document.getElementById(src_id);
    var div2chg = document.getElementById(div_id);
    div2chg.style.width = src_obj.value+"px";

}

</script>

</head>
<body>


    <select name="sizi_pixel" id="drp" onchange="chng_div('drp','div_to_chng');">
        <option value="100">100 Pixels</option>
        <option value="200">200 Pixels</option>
        <option value="350">350 Pixels</option>
        <option value="450">450 Pixels</option>
        <option value="500">600 Pixels</option>
    </select>

    <div style="border-width:3px;border-style:solid;border-color:#ff9900; height:400px; width:300px" id="div_to_chng">

        <input class="color" value="999">
        <input class="color" value="999">
        <input class="color" value="999">

    </div>


</body>
</html>

这只是一个例子，请不要长期使用内联CSS样式，否则会花费太多。

Answer 3

这个javascript应该可以做到！

您需要将事件侦听器附加到选择输入，还需要更改选项以表示框中的值。并给你的div一个id，我把它给了id'myDiv'。

你也可以在这里看到它：http://jsfiddle.net/6avqc/1/

document.getElementById('drp').addEventListener('change', changeSize);

function changeSize() {
    var myDiv = document.getElementById('myDiv');
    var selectbox = document.getElementById('drp');

    var index = selectbox.selectedIndex;
    var value = selectbox[index].value;

    myDiv.style.width = value + 'px';
}

通过从下拉列表中选择值来更改div的大小

3 个答案: