0

我有一个下拉菜单，其中有一个像素值，下面是一个带有一些数据的 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>

任何帮助将不胜感激

4

3 回答 3

0

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

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

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

于 2012-09-28T20:11:09.713 回答
0

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

Jsfiddle 演示：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 样式，否则会花费太多。
于 2012-09-28T20:16:15.033 回答
0

这个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';
}​
于 2012-09-28T20:32:30.483 回答