dropdown content to display fixed-jquery

This commit is contained in:
Zain Fauzan Rofie Azizi
2018-03-26 12:28:01 +08:00
parent db24555c2e
commit ef4fde642d
3 changed files with 91 additions and 37 deletions
+21 -30
View File
@@ -116,19 +116,19 @@
<div class="form-divider"></div>
<div class="form-row-group with-icons-no-padding">
<div class="form-row no-padding">
<div id="deliverysvc">
<div class="form-element-title">
<label style="color: #000">Delivery Services</label>
</div>
<select id="typeDelivery" onchange="ShowSelectedDelivery()" class="form-element">
<select id="typeDelivery" class="form-element">
<option selected disabled hidden>Please Choose Delivery Services</option>
<option value="services-a">Inhouse Services</option>
<option value="services-b">Courier Services</option>
<option value="services-c">Outsource Services</option>
<option value="services-d">Self-Collect</option>
<option value="0">Inhouse Services</option>
<option value="1">Courier Services</option>
<option value="2">Outsource Services</option>
<option value="3">Self-Collect</option>
</select>
<div class="hidden">
<div id="services-a" class="services">
<div style="display:none" id="services-a">
<div class="form-divider"></div>
<div class="form-label-divider">
@@ -163,9 +163,10 @@
</div>
<div class="form-divider"></div>
</div>
<div id="services-b" class="services">
<div style="display:none" id="services-b">
<div class="form-divider"></div>
<div class="form-label-divider">
<span class="label-span">Courier Services</span>
@@ -188,7 +189,7 @@
<div class="form-divider"></div>
</div>
<div id="services-c" class="services">
<div style="display:none" id="services-c">
<div class="form-divider"></div>
<div class="form-label-divider">
<span class="label-span">Outsource Services</span>
@@ -219,12 +220,11 @@
</div>
<input type="text" class="form-element" placeholder="PFG 5768" required />
</div>
</div>
<div class="form-divider"></div>
</div>
<div id="services-d" class="services">
</div>
<div class="form-divider"></div>
</div>
<div style="display:none" id="services-d">
<div class="form-divider"></div>
<div class="form-label-divider">
<span class="label-span">Self-Collect</span>
@@ -287,8 +287,7 @@
</div>
<div class="form-divider"></div>
</div>
</div>
</div>
</div>
</div>
@@ -401,18 +400,16 @@
<div class="form-divider"></div>
</div>
</div>
</div>
</div>
<!-- Pagination Start Here-->
<div class="form-divider"></div>
<div class="centerpagination">
<div style="text-align: center">
<div class="pagination">
<a href="#">&laquo;</a>
<a class="active" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>
</div>
@@ -450,14 +447,8 @@
});
}
$(document).ready(function(){
$("select").click(function(){
$("services").hide();
});
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/global.script.js"></script>
+29 -7
View File
@@ -2677,13 +2677,12 @@ cont.menu ul.main-menu>li li a{
/*end of part 28----------------------------------------------------*/
/*-------------------------------------------------------------------
[29. Table and Collapsible]
[29. split form
-------------------------------------------------------------------*/
.form-first-name, .form-last-name {
width: 46%;
border: none;
back
}
.form-last-name {
@@ -2713,9 +2712,36 @@ input[type=text]:disabled {
float:left;
}
/*end of part 29----------------------------------------------------*/
/*-------------------------------------------------------------------
[30. pagination
-------------------------------------------------------------------*/
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;
font-size: 10px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
/*end of part 30----------------------------------------------------*/
/*Other Styles and helpers------------------------------------------*/
.block {
display: block;
@@ -2742,10 +2768,6 @@ h1 .button {
color: #000;
}
.hidden {
display: none;
}
+41
View File
@@ -400,4 +400,45 @@ function fasterPreviewCompany(uploader) {
$("#CompanyUpload").change(function (c) {
fasterPreviewCompany(this);
});
/* =========================================
[dropdownView] Start Here
==========================================*/
$(document).ready(function(){
$('#typeDelivery').on('change', function() {
if ( this.value == '0')
{
$("#services-a").show();
}
else
{
$("#services-a").hide();
}
if ( this.value == '1')
{
$("#services-b").show();
}
else
{
$("#services-b").hide();
}
if ( this.value == '2')
{
$("#services-c").show();
}
else
{
$("#services-c").hide();
}
if ( this.value == '3')
{
$("#services-d").show();
}
else
{
$("#services-d").hide();
}
});
});