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>

因此，如果我选择“中矩形 (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 回答