带有select选项的jquery事件问题

时间：2017-05-20 13:24:48

标签： javascript jquery html css

我不知道是我的那个问题，但根据我的估计它看起来像是。如下面的示例所示，如果我从403选择1那么1选择正在显示，或者我从Child选择2然后2选择显示，但是在我选择0后再次如果我选择1或2而不是我的父选择不显示我的问题或我必须使用什么样的活动？

＆＃13;
＆＃13; 
Child
＆＃13; 
$(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);
＆＃13; 
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;
}
＆＃13;
＆＃13;
＆＃13;

所以我的相关js区域就在这里

<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>

CodePen Demo

1 个答案:

答案 0 :(得分：1)

将ifs更改事件中的.cocuk-kisi-sayi更改为此。

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();
}
相关问题
最新问题