I don't know is that issue of mine but according to my estimates it looks like it is.so as you can see in the below example if I choose 1 from Child then 1 select is showing or if I choose 2 from Child then 2 select is showing so but after I select 0 and again if I select 1 or 2 than my parent select is not showing where is my problem or what kind of event that I have to use ?
$(document).ready(function(){
$('[data-role="popover"]').popover();
$(document).on("change",".cocuk-kisi-sayi",function(e){
if($(this).val() == 0) {
$(".cocuk-yaslari-area").hide();
}else if($(this).val()==1){
$(".cocuk-yasi-text,.cocuk-yasi-1").show();
$(".cocuk-yasi-2").hide();
}else if($(this).val()==2){
$(".cocuk-yasi-text,.cocuk-yasi-1,.cocuk-yasi-2").show();
}
else{
}
});
$(".yetiskin-kisi-sayi, .cocuk-kisi-sayi").change(function() {
var val1 = parseInt($('.yetiskin-kisi-sayi').find(":selected").text()),
val2 = parseInt($('.cocuk-kisi-sayi').find(":selected").text());
$(".yetiskin-value").text(val1);
$(".cocuk-value").text(val2);
$(".kisi-count").text(val1 + val2 + " Person");
});
});
!function(t,e,o,n){"use strict";var r=t.fn.popover,i=function(e,o){return this.$el=t(e),this.options=this.getOptions(o),this.$wrapper=this.$el.parents(".popover-wrapper").eq(0),this.$body=this.$wrapper.find(".popover-body"),this.listenEvents(),this};i.DEFAULTS={trigger:"click"},i.prototype.getDefaults=function(){return i.DEFAULTS},i.prototype.getOptions=function(e){return e=t.extend({},this.getDefaults(),this.$el.data(),e)},i.prototype.listenEvents=function(e){var n=this,r=this.$el;t(o).click(function(e){if(this.$wrapper.hasClass("open")){var o=!t.contains(this.$wrapper[0],e.target)&&this.$wrapper[0]!==e.target;o&&this.close()}}.bind(this));var i=this.options.trigger;return"click"===i?r.on("click",function(t){t.preventDefault(),n.toggle()}):"hover"===i&&(r.on("mouseenter",function(t){t.preventDefault(),n.open()}),r.on("mouseleave",function(t){t.preventDefault(),n.close()}),r.on("click",function(t){t.preventDefault(),n.toggle()})),this.$wrapper.find('[data-toggle-role="close"]').on("click",function(t){t.preventDefault(),n.close()}),this},i.prototype.open=function(){return this.$wrapper&&this.$wrapper.addClass("open"),this},i.prototype.close=function(){return this.$wrapper&&this.$wrapper.removeClass("open"),this},i.prototype.toggle=function(){return this.$wrapper&&this.$wrapper.toggleClass("open"),this};var p=function(e){return this.each(function(){var o=t(this),n=o.data("gb.popover");n||(n=new i(this,e),o.data("gb.popover",n))})};t.fn.popover=p,t.fn.popover.Constructor=i,t.fn.popover.noConflict=function(){return t.fn.popover=r,this}}(jQuery,window,document);body{
margin:100px;
}
.popover-modal:after,.popover-modal:before{display:inline-block;content:""}.popover-wrapper{position:relative}.popover-modal{-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-transition:all 240ms cubic-bezier(.34,1.61,.7,1);-o-transition:all 240ms cubic-bezier(.34,1.61,.7,1);transition:all 240ms cubic-bezier(.34,1.61,.7,1);-webkit-transform:scale(0);transform:scale(0);transform-origin:29px -10px;opacity:0;position:absolute;z-index:1000;width:300px;margin-top:8px;border-radius:4px;border:1px solid #aab2bd;background-color:#fff}.popover-wrapper.open .popover-modal{-webkit-transform:scale(1);transform:scale(1);opacity:1}.popover-wrapper.open .btn-dropdown{outline:0}.popover-modal:before{position:absolute;top:-16px;left:16px;border:8px solid transparent;border-bottom-color:#aab2bd}.popover-modal:after{position:absolute;top:-14px;left:17px;border:7px solid transparent;border-bottom-color:#fff}.popover-modal .popover-body{margin:0;padding:20px;max-height:300px;overflow:hidden;}.popover-modal .popover-body.popover-body-padded{padding:8px}.popover-modal .popover-header{padding:8px;line-height:19px;border-bottom:1px solid #aab2bd}.popover-modal .popover-header a{color:#434a54;text-decoration:none;line-height:19px}.popover-modal .popover-header a:hover{color:#000}.popover-modal .popover-header .popover-close-btn{float:right}.popover-wrapper.right .popover-modal{transform-origin:275px -10px;right:0}.popover-wrapper.right .popover-modal:before{left:auto;right:16px}.popover-wrapper.right .popover-modal:after{left:auto;right:17px}
.kisi-sayisi-sec{
background:#FFF;
color:#333;
width:100%;
height:47px;
padding:10px;
border-radius:3px;
border:1px solid #ccc;
display:block;
width:150px;
cursor:pointer;
@include clearfix();
.rez-kisi{
margin-right: 5px;
}
a{
&:hover,&:focus{
color:#878787;
}
}
}
.kisi-sayi-otel-sec{
select{
border:1px solid #e6e6e6;
height:37px;
line-height: 12px;
padding: 0 0 0 15px;
font-weight: 300;
font-size: 12px;
}
}
.cocuk-yaslari-area{
select{
width: 30%;
}
}
.cocuk-yasi-1,.cocuk-yasi-2,.cocuk-yasi-text{
display: none;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<span class="popover-wrapper">
<a href="#" data-role="popover" data-target="example-popover" class="kisi-sayisi-sec"><span class="kisi-count">Person</span></a>
<div class="popover-modal example-popover">
<div class="popover-body">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr0">
<p>Adult</p>
<select class="yetiskin-kisi-sayi">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pl5">
<p>Child</p>
<select class="cocuk-kisi-sayi">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="hidden" class="yetiskin-value">
<input type="hidden" class="cocuk-value">
</div>
</div>
<div class="row cocuk-yaslari-area">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="cocuk-yasi-text">Çocuk Yaşları</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<select class="cocuk-yasi-1">
<option value="0">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<!-- cocuk yasi 1-->
<select class="cocuk-yasi-2">
<option value="0">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<!-- çocuk yaşı 2-->
</div>
</div>
</div>
</div>
</span>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>so my related js area is here
$(document).ready(function(){
$('[data-role="popover"]').popover();
$(document).on("change",".cocuk-kisi-sayi",function(e){
if($(this).val() == 0) {
$(".cocuk-yaslari-area").hide();
}else if($(this).val()==1){
$(".cocuk-yasi-text,.cocuk-yasi-1").show();
$(".cocuk-yasi-2").hide();
}else if($(this).val()==2){
$(".cocuk-yasi-text,.cocuk-yasi-1,.cocuk-yasi-2").show();
}
else{
}
});
$(".yetiskin-kisi-sayi, .cocuk-kisi-sayi").change(function() {
var val1 = parseInt($('.yetiskin-kisi-sayi').find(":selected").text()),
val2 = parseInt($('.cocuk-kisi-sayi').find(":selected").text());
$(".yetiskin-value").text(val1);
$(".cocuk-value").text(val2);
$(".kisi-count").text(val1 + val2 + " Person");
});
});
Change your ifs in your .cocuk-kisi-sayi change event to this.
if($(this).val() == 0) {
$(".cocuk-yaslari-area").hide();
}else if($(this).val()==1){
$(".cocuk-yasi-text,.cocuk-yasi-1").show();
$(".cocuk-yasi-2").hide();
$(".cocuk-yaslari-area").show();
}else if($(this).val()==2){
$(".cocuk-yasi-text,.cocuk-yasi-1,.cocuk-yasi-2").show();
$(".cocuk-yaslari-area").show();
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments