0

ピクセルの値があるドロップダウンがあり、その下にはいくつかのデータを含む div があり、div には幅と高さがありますが、必要なことは、任意の値を選択するときに、350px を選択したと仮定して、それに応じて div が自動的に調整されます。そこから助けを得ることができるように、リンクを参照する方法がわかりません。過去 1 時間、Google でそれまたはあらゆる種類のヘルプを探しています。

ここに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を含め、幅に合わせてリストの値を変更する必要があります

于 2012-09-28T20:11:09.713 に答える
0

追加の質問がある場合は、お気軽に質問してください。

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 スタイルを長期間使用しないでください。
于 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 に答える