5

私はこのようなテキストボックスを持っています:

<input id="patId1" type="text" name="patId1" value="">

ページが読み込まれると、テキストボックスの幅を設定するスクリプトが呼び出されます。そのコードは次のとおりです。

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth;

ここで、patId2 はドロップダウン リスト (選択タグ) です。基本的に私がやろうとしているのは、テキストボックスの幅をドロップダウンリストの幅と同じに設定することです。

ここで、DOCTYPE が設定されている場合、上記のスクリプトは機能しません。ただし、設定されていない場合は、幅が適用されます。

どんな助けでも。

4

3 に答える 3

4

の値は数値にoffsetWidthなります。CSSプロパティはlengthwidthを受け入れます。長さ ( 以外) には単位が必要です。quirks モードでは、ブラウザーは CSS 仕様に違反し、単位を想定します。0px

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + 'px'
于 2013-02-25T13:39:43.417 に答える
0

これを行う簡単な方法があり、 @cychan による次の投稿のコードを再利用しました。

リンク：

ユーザーがオプションを選択した後に「選択」オプションの幅を拡張する方法

一般的なアプローチは次のとおりです。

<div id="select-wrapper-01" style="width: 180px; overflow: hidden;">
    <select style="width: auto;" name="abc" id="10">
        <option value="-1">Any</option>
        <option value="123">123</option>
    </select>
</div>

ここに画像の説明を入力

「ちょっと待ってください。私の最大の選択オプションは幅 180 ピクセルではありません!」と言うかもしれません。

その場合は、widthとoverflowstyle 属性を から削除しますdiv。

次に、javascript を使用して、周囲の div に次のような適切な幅を提供します。

var actualWidth = document.getElementById("patId2").offsetWidth;
document.getElementById("select-wrapper-01").style.width = actualWidth + 'px';

ここに画像の説明を入力

これはjsfiddleの作業コピーです。派手なことは何もありませんが、うまくいきます。

http://jsfiddle.net/acegyver/eTEuk/

select をいじってみて、option長くしたり短くしたりして、selectが動的にどのように適応するかを確認できます。

クレジットが必要な場合はクレジットを表示してください: 既に述べたように、@cychan による既存の投稿からコードを微調整しました。あなたの質問に対して機能する実装は私によるものです。

于 2013-02-26T17:10:16.797 に答える
0

dropdown の offsetWidth に「px」を追加します。JSFiddle: http://jsfiddle.net/whizkid747/ysj2t/1/ :document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + "px";

于 2013-02-25T13:40:27.407 に答える