如何在bootstrap中使用数字微调器显示或隐藏表单元素

时间:2017-07-15 21:05:50

标签: javascript html twitter-bootstrap

我最近正在开发一个bootstrap项目,我在其中一个表单中包含了一个事件规划器。问题是如何通过获取数字spinner的值来使用数字微调器显示或隐藏表单组.Below是我的代码。谢谢。

$('select[name="number-spinner"]').on('change',function(){
   var selectedVal=$(this).val();
   switch(selectedVal){
       case '0':
                   $('.day-1').hide();
                   $('.day-2').hide();
				   $('.day-3').hide();
				   $('.day-4').hide();
				   $('.day-5').hide();
				   $('.day-6').hide();
				   $('.day-7').hide();
             break;
       case '1'://case '2': 
       //Add this into consideration if you have multiple cases where functionality has to be same
                   $('.day-1').show();
				   $('.day-2').hide();
				   $('.day-3').hide();
				   $('.day-4').hide();
				   $('.day-5').hide();
				   $('.day-6').hide();
				   $('.day-7').hide();
             break;
		case '2':
					$('.day-1').hide();
                   $('.day-2').show();
				   $('.day-3').hide();
				   $('.day-4').hide();
				   $('.day-5').hide();
				   $('.day-6').hide();
				   $('.day-7').hide();
       default: //change this according to your need
                   $('.day-1').hide();
                   $('.day-2').hide();
				   $('.day-3').hide();
				   $('.day-4').hide();
				   $('.day-5').hide();
				   $('.day-6').hide();
				   $('.day-7').hide();
             break;
   }
});
<div id="number-spinner" class="col-sm-3">
<input 
	id="demo0"
   type="text"
   value="0"
   name="demo0"
   data-bts-min="0"
   data-bts-max="7"
   data-bts-init-val=""
   data-bts-step="1"
   data-bts-decimal="0"
   data-bts-step-interval="7"
   data-bts-force-step-divisibility="round"
   data-bts-step-interval-delay="500"
   data-bts-prefix=""
   data-bts-postfix="day(s)"
   data-bts-prefix-extra-class=""
   data-bts-postfix-extra-class=""
   data-bts-booster="true"
   data-bts-boostat="10"
   data-bts-max-boosted-step="false"
   data-bts-mousewheel="true"
   data-bts-button-down-class="btn btn-default"
   data-bts-button-up-class="btn btn-default"
		/>

</div>

0 个答案:

没有答案