1

ユーザーがドロップダウン リストで値を選択すると、その値を分割して 2 つのテキスト入力に渡す必要があります。これを行う方法がわかりません...

            <div class="formitem">
          <p style="float:left; width:300px;">Select Ad Size: <em>*</em></p>
          <select class="formitem" id="s7" style="float:left;" name="size">
            <option value="0;0">Custom</option>
            <option value="300;250">Medium Rectangle (300x250)</option>
            <option value="250;250">Square Pop-Up (250x250)</option>
            <option value="240;400">Vertical Rectangle (240x400)</option>
            <option value="336;280">Large Rectangle (336x280)</option>
            <option value="180;150">Rectangle (180x150)</option>
            <option value="300;100">3:1 Rectangle (300x100)</option>
            <option value="720;300">Pop-Under (720x300)</option>
            <option value="468;60">Full banner (468x60)</option>
            <option value="234;60">Half banner (234x60)</option>
            <option value="88;31">Micro bar (88x31)</option>
            <option value="120;90">Button 1 (120x90)</option>
            <option value="120;60">Button 2 (120x60)</option>
            <option value="120;240">Vertical banner (120x240)</option>
            <option value="125;125">Square button (125x125)</option>
            <option value="728;90">Leaderboard (728x90)</option>
            <option value="160;600">Wide skyscraper (160x600)</option>
            <option value="120;600">Skyscraper (120x600)</option>
            <option value="300;600">Half page ad (300x600)</option>
          </select>
        </div>
        <div class="specialitem" style="height:90px;">
          <p style="float:left; width:100px;">Width: <em>*</em></p>
          <input type="text" name="widthbox" id="widthbox" class="textInput text-p5" style="width:80px;"/>
          <p style="float:right;">px</p>
        </div>
        <div class="specialitem last" style="height:90px;">
          <p style="float:left; width:100px;">Height: <em>*</em></p>
          <input type="text" name="heightbox" id="heightbox" class="textInput text-p5" style="width:80px;"/>
          <p style="float:right;">px</p>
        </div>

したがって、「Medium Rectangle (300x250)」を選択すると、Widthbox の値が 300 に、Heightbox の値が 250 に更新されます。

いくつかの助けがいいでしょう:)

ありがとう

4

3 に答える 3

1

単なる提案ですが、プレーンな JavaScript (ライブラリなし) バージョンの場合:

function splitToUpdate(source, to1, to2) {
    if (!source || !to1 || !to2) {
        return false;
    }
    else {
        source = source.nodeType == 1 ? source : document.getElementById(source);
        to1 = to1.nodeType == 1 ? to1 : document.getElementById(to1);
        to2 = to2.nodeType == 1 ? to2 : document.getElementById(to2);

        var selOpt = source.selectedIndex,
            vals = source.getElementsByTagName('option')[selOpt].value;
        to1.value = vals.split(';')[0];
        to2.value = vals.split(';')[1];
    }
}

var sel = document.getElementById('s7'),
    opt1 = document.getElementById('widthbox'),
    opt2 = document.getElementById('heightbox');

これは、ノード参照を使用して次のように呼び出すことができます。

sel.onchange = function(){
    splitToUpdate(sel, opt1, opt2);
};

JS フィドルのデモ。

または、関連する要素のid属性を使用して:form

sel.onchange = function(){
    splitToUpdate('s7', 'widthbox', 'heightbox');
};

JS フィドルのデモ。

于 2012-12-19T20:17:33.353 に答える
0

これは簡単な解決策です。空のチェックなどを実行してください。

HTML:

<select class="formitem" id="s7" style="float:left;" name="size" onchange="setValue(this)">

JS:

function setValue(dropdown)
{
   document.getElementById("widthbox").value=dropdown.value.split(";")[0];
   document.getElementById("heightbox").value=dropdown.value.split(";")[1];

}
于 2012-12-19T19:50:28.917 に答える
0

jquery を使用すると、次のように移動できます。

  $("#s7").change(function(){
           var selectedValue = $("option:selected",$(this)).val().split(";");

           $("#widthbox").val(selectedValue[0]);
           $("#heightbox").val(selectedValue[1]);
     });​

動作確認デモ

于 2012-12-19T19:58:45.263 に答える