Fancyform - SelectUpdater

by Jens Kühn

HTML

<script src="http://lutrasoft.nl/jQuery/fancyform/jquery.fancyform.min.js"></script>
<script src="http://www.vng.de/vng_ovp/res/vng_ovp/gfx/select.png"></script>
<script src="http://www.vng.de/vng_ovp/res/vng_ovp/gfx/check.png"></script>
<form class="form-horizontal">
    <section class="controls">
        <select id="deliveryMonth" name="deliveryMonth" class="month" size="12">
            <option value="4" selected="selected">April</option>
            <option value="5">Mai</option>
            <option value="6">Juni</option>
            <option value="7">Juli</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">Oktober</option>
            <option value="11">November</option>
            <option value="12">Dezember</option>
        </select>
    </section>
    <section class="controls">
        <select id="deliveryYear" name="deliveryYear" class="year">
            <option value="2015" selected="selected">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
        </select>
    </section>
</form>

CSS

.transformSelect{width:280px;background:#fff;float:left}
.form-horizontal .controls .month+.transformSelect{width:140px;margin-left:10px}
.form-horizontal .controls .year+.transformSelect{width:100px;margin-left:10px}
ul.transformSelect{margin:0;padding:0;list-style:none;display:inline-block}.transformSelect{width:280px;background:#fff}.transformSelect ul{position:absolute;border:2px solid #c8c8c8;width:100%;top:0;margin:0;padding:2px;background:#fff}.transformSelect ul span{border:none;background:#fff;margin:0;padding:1px 3px 3px 8px}.transformSelect ul span:hover{background:#e5e5e5}.transformSelect ul li{margin-top:2px}.transformSelect ul li:first-child{margin-top:0}.transformSelect ul li.selected{background:#e5e5e5}.transformSelect ul li.selected span{background:#e5e5e5}.transformSelect ul li.selected span:after{content:url("http://www.vng.de/vng_ovp/res/vng_ovp/gfx/check.png");position:absolute;right:3px;top:5px}.transformSelect li{position:relative;list-style:none;background:#fff}.transformSelect span{background:transparent url("http://www.vng.de/vng_ovp/res/vng_ovp/gfx/select.png") no-repeat right 5px center;border:2px solid #c8c8c8;cursor:pointer;display:block;height:27px;left:0;margin:0;padding:3px 10px;top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.error+.transformSelect span{border-color:#f50101}

#deliveryMonth{
    display: block !important;
    float: left;
}

JavaScript

var deliveryStarts =...