JSFiddle - React, Tailwind, and code Playground
HTML
<script src="abo.wauw.me/js/searchabledropdown.src.js"></script>
<!-- HEADH -->
<script src="js/shCore.js" type="text/javascript"></script>
<script src="js/shBrushJScript.js" type="text/javascript"></script>
<script src="js/searchabledropdown.src.js" type="text/javascript"></script>
<!-- BODY -->
<div class="dropdown_type">
<select id="dropdown_type">
<option>VÆLG TYPE</option>
</select>
</div>
<div class="dropdown_abo">
<select id="dropdown_abo" name="dropdown_abo">
<option>VÆLG ABONNEMENT</option>
<?php if(mysql_num_rows($sql_select)>0){ while($row = mysql_fetch_assoc($sql_select)){ ?>
<option>
<? echo $row[ 'abo_name']; ?>
</option>
<? } } if($_POST[ 'dropdown_abo']) { $dropdown=$_POST[ 'dropdown_abo']; echo $dropdown; } ?>
</select>
</div>
<div class="clear"></div>
<div class="abo_info">
<?php if(mysql_num_rows($sql_select)>0){ while($row = mysql_fetch_assoc($sql_select)){ ?>
<div class="header_abo_navn padding_left">
<h1><? echo $row['abo_name'];?></h1>
<h6>Focus SOC: <? echo $row['fokus_soc'];?></h6>
</div>
<div class="header_prices padding_left">
<h5>Abonnement indhold:</h5>
<hr>
</div>
<table class="abo_content padding_left">
<tr>
<td>Abonnement pr. mdr:</td>
<td>
<? echo $row[ 'price'];?>kr.</td>
</tr>
<tr>
<td>Tale: (timer)</td>
<td>
<? echo $row[ 'calls'];?>Timer</td>
</tr>
<tr>
<td>Data: (MB/GB)</td>
<td>
<? echo $row[ 'data'];?>GB</td>
</tr>
<tr>
<td>SMS: (pr. stk.)</td>
<td>
<? echo $row[ 'sms'];?>
</td>
</tr>
<tr>
<td>MMS: (pr. stk.)</td>
<td>
<? echo $row[ 'mms'];?>
</td>
</tr>
<tr>
...
CSS
@import url(http://fonts.googleapis.com/css?family=Oswald:300, 400);
.top_nav {
margin-bottom: 20px;
margin-top: 20px;
}
label {
font-family: Arial;
font-size: 10px;
margin: 10px;
}
.delete {
color: #FF003C;
float: right;
margin-right: 10px;
margin: 10px;
text-align: right;
cursor: pointer;
font-size: 10px;
padding: 0px;
border: none;
background: none;
width: 33px !important;
}
.delete:hover {
text-decoration: underline;
}
.edit {
color: #FABE28;
float: right;
margin-right: 10px;
margin: 10px;
text-align: right;
cursor: pointer;
}
.edit:hover {
text-decoration: underline;
}
.abo_navn {
width: 300px;
}
input[type="text"] {
width: 250px;
margin: 0 10px 10px 10px;
font-family: Arial;
font-size: 12px;
}
input[type="checkbox"] {
margin-top: 5px;
padding-top: 5px;
}
input[type="submit"] {
width: 100px;
margin: 10px;
}
input[type="reset"] {
width: 100px;
margin: 10px;
}
textarea {
width: 250px;
margin: 0 10px 10px 10px;
font-family: Arial;
font-size: 12px;
}
.abo_box {
width: 375px;
/*height: 30px;*/
border: thin solid #cacaca;
border-radius: 5px;
margin: 10px;
}
/*
* INDEX PAGE
*/
.wrapper {
width: 700px;
min-height: 100px;
font-family:'Oswald', sans-serif;
margin: 0px;
padding: 0px;
text-transform: uppercase;
}
.padding_left {
padding-left: 15px;
}
.header_bg {
height: 50px;
background-color: #ff6f6f;
}
.header_bg h2 {
margin: 0;
padding: 0 0 0 15px;
line-height: 45px;
color: #fff;
}
.dropdown_type {
float: left;
padding-left: 15px;
margin: 15px 0;
}
.dropdown_abo {
float: right;
padding-right: 15px;
margin: 15px 0;
}
select {
width: 325px;
height: 40px;
background: none;
border: 1px solid #eee;
text-transform: uppercase;
}
.dropdown_abo input {
position: absolute;
top: 0;
left: 0;
...
JavaScript
$(document).ready(function () {
$("#dropdown_abo").searchable();
});