MENÜ

SOCIAL MEDIA

» Startseite » js » Beitrag

Dropdownliste mal anders

JS:

<html>
<head>
<script>
selectBox = function(selectName,boxWidth,boxHeight) {
    var staticFontSize        = new Number(12);        // Textfeld Schriftgröße
    var staticFontFace        = new String("arial");        // Textfeld Schriftart
    var staticBorderColor     = new String("#979797");    // Textfeld Rahmenfarbe

    var imageWidth            = new Number(19);
    var img_up_mout           = new String("up.gif");        // image up-scroll mouseout
    var img_up_mover          = new String("up2.gif");    // image up-scroll mouseover
    var img_down_mout         = new String("down.gif");    // image down-scroll mouseout
    var img_down_mover        = new String("down2.gif");    // image down-scroll mouseover
    


    // Ab hier nicht verändern!
    var output          = new String();
    var spanRandId      = new String(Math.floor(Math.random()*10000000));
    var selectRandId    = new String(Math.floor(Math.random()*10000000));
    var imagesRandId    = new String(Math.floor(Math.random()*10000000));

    
    output += "<table cellspacing='0px' cellpadding='0px'>";
    output += "<tr>";
    output += "<td rowspan='2'>";
    output += "<span id='"+spanRandId+"'>";
    output += "<input type='text' style='";
    output += "width:"+(boxWidth-imageWidth)+"px;";
    output += "font:"+staticFontSize+"px "+staticFontFace+";";
    output += "border:1px solid "+staticBorderColor+";";
    output += "height:"+boxHeight+"px;cursor:default' ";
    output += "id='_"+selectRandId+"_1' readonly>";
    output += "<input type='hidden' id='_"+selectRandId+"_2' name='"+selectName+"'>";
    output += "</span>";
    output += "</td>";
    output += "<td valign='bottom'>";
    output += "<img src='"+img_up_mout+"' name='"+imagesRandId+"_1' ";
    output += "onmouseover="this.src='"+img_up_mover+"'" ";
    output += "onmouseout="this.src='"+img_up_mout+"'" ";
    output += "onclick="document.getElementById('"+spanRandId+"').setLower()">";
    output += "</td>";
    output += "</tr>";
    output += "<tr>";
    output += "<td valign='top'>";
    output += "<img src='"+img_down_mout+"' name='"+imagesRandId+"_2' ";
    output += "onmouseover="this.src='"+img_down_mover+"'" ";
    output += "onmouseout="this.src='"+img_down_mout+"'" ";
    output += "onclick="document.getElementById('"+spanRandId+"').setUpper()">";
    output += "</td>";
    output += "</tr>";
    output += "</table>";

    document.write(output);

    var obj               = document.getElementById(spanRandId);
    obj.selectedIndex     = 0;
    obj.spanRandId        = spanRandId;
    obj.selectLable       = new Array();
    obj.selectValue       = new Array();
    obj.valueBoxId        = document.getElementById("_"+selectRandId+"_1");
    obj.optionBoxId       = document.getElementById("_"+selectRandId+"_2");

    obj.setValues = function() {
        this.valueBoxId.value  = this.selectLable[this.selectedIndex];
        this.optionBoxId.value = this.selectValue[this.selectedIndex];
    }

    obj.setUpper = function() {
        if(this.selectedIndex<this.selectLable.length-1) {
            this.selectedIndex++;
            this.setValues();
        }
    };

    obj.setLower = function() {
        if(this.selectedIndex>0) {
            this.selectedIndex--;
            this.setValues();
        }
    };

    this.prototype = obj;
    this.addValues = function(lable,value) {

        var p = this.prototype;

        p.selectLable[p.selectLable.length] = lable;
        p.selectValue[p.selectValue.length] = value;

        p.valueBoxId.value  = p.selectLable[0];
        p.optionBoxId.value = p.selectValue[0];

        p = undefined;
    };

    obj                  = undefined;
    output               = undefined;
    spanRandId           = undefined; 
    selectRandId         = undefined;
    imagesRandId         = undefined;
    
    staticFontSize       = undefined;
    staticFontFace       = undefined;
    staticBorderColor    = undefined;

    imageWidth           = undefined;
    img_up_mout          = undefined;
    img_up_mover         = undefined;
    img_down_mout        = undefined;
    img_down_mover       = undefined;
};
</script>
<style>
td,input{font:10px verdana}
</style>
</head>
<body>
<form action="index.html" method="get">
<table>
<tr>
    <td width="150px"><b>Ihr Namen</b></td>
    <td><input name="feld" style="border:1px solid #979797;width:120px"></td>
</tr>
<tr>
    <td width="150px"><b>Ihr Internetanschluss</b></td>
    <td>
        <script>
        box = new selectBox("meineselectbox",120,19);
        box.addValues('DSL','t_dsl');
        box.addValues('ISDN','isdn');
        box.addValues('Moden','moden');
        box.addValues('Ich habe Keinen','none');
        </script>
    </td>
</tr>
<tr>
    <td width="150px">&nbsp;</td>
    <td><input type="submit" value="abschicken" style="border:1px solid #979797;background:#ffffff;width:120px"></td>
</tr>
</form>
</body>
</html>