jQuery事件问题与选择选项

Question

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");

  });
});

CodePen Demo

Answer 1

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();
}