Question

我想将multi select与spinner选项集成。但我（可以）只找到了多项选择。 https://silviomoreto.github.io/bootstrap-select/examples/

我搜索了一天多，但我找到了带输入字段的Bootstrap微调器。 https://bootsnipp.com/snippets/4no2R

在此片段中，总计数值仅显示给输入标签（如果我们点击成人的旋转器，孩子）。但我想在输入字段中显示如（Adult-2，childern-2），如下所示location（1jquery，2script）。

http://www.jqueryscript.net/demo/Convenient-jQuery-Separated-Input-Stepper-Plugin-NumberCategorySelector/

我在小提琴中添加了js和脚本。

  $('#passengers').val(total);
    input.val(oldValue);
  });

Answer 1

进行如下更改。添加其他文本框并隐藏当前文本框。

var typeText = {
    adult : {
    singular: 'Adult', plural: 'Adults'
  },
    child : {
    singular: 'Child', plural: 'Children'
  },
    infant : {
    singular: 'Infant', plural: 'Infants'
  }
}
$(".popover-content input").each(function(i) {
    if(this.value > 0){
        passangerInfoText.push(typeText[this.id][this.value>1?'plural':'singular'] + ': ' + this.value);
    }
});
$('#passanger-info').val(passangerInfoText.join(', '))

<强> Fiddle

var typeText = {
	adult : {
  	singular: 'Adult', plural: 'Adults'
  },
	child : {
  	singular: 'Child', plural: 'Children'
  },
	infant : {
  	singular: 'Infant', plural: 'Infants'
  }
}
$(function () { 
    var $popover = $('.popover-markup>.trigger').popover({
      html: true,
      placement: 'bottom',
      // title: '<?= lang("Select passengers");?><a class="close demise");">×</a>',
      content: function () {
          return $(this).parent().find('.content').html();
      }
    });

    // open popover & inital value in form
    var passengers = [1,0,0];
    $('.popover-markup>.trigger').click(function (e) {
        e.stopPropagation();
        $(".popover-content input").each(function(i) {
            $(this).val(passengers[i]);
        });
    });
    // close popover
    $(document).click(function (e) {
        if ($(e.target).is('.demise')) {        
            $('.popover-markup>.trigger').popover('hide');
        }
    });
// store form value when popover closed
 $popover.on('hide.bs.popover', function () {
    $(".popover-content input").each(function(i) {
        passengers[i] = $(this).val();
    });
  });
    // spinner(+-btn to change value) & total to parent input 
    $(document).on('click', '.number-spinner a', function () {
        var btn = $(this),
        input = btn.closest('.number-spinner').find('input'),
        total = $('#passengers').val(),
        oldValue = input.val().trim();
        adult = $('#adult').val();

    if (btn.attr('data-dir') == 'up') {
      if(oldValue < input.attr('max')){
        oldValue++;
        total++;
      }
    } else {
      if (oldValue > input.attr('min')) {
        oldValue--;
        total--;
      }
    }
    $('#passengers').val(total);
    input.val(oldValue);
    passangerInfoText = [];
    $(".popover-content input").each(function(i) {
        if(this.value > 0){
        	passangerInfoText.push(typeText[this.id][this.value>1?'plural':'singular'] + ': ' + this.value);
        }
    });
    $('#passanger-info').val(passangerInfoText.join(', '))
  });
  $(".popover-markup>.trigger").popover('show');
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <h3>Passenger Number Input ( Popover Form + Spinner Input )</h3>
    <p>Input form with sub inputs</p>
	<div class="col-lg-3">
		<div class="popover-markup"> 
            <div class="trigger form-group form-group-lg form-group-icon-left"><i class="fa fa-users input-icon input-icon-highlight"></i>
                <label>Passenger</label>
                <input type="text" name="passanger-info" id="passanger-info" class="form-control" value="Adult 1" disabled>
                <input type="hidden" name="passengers" id="passengers" class="form-control" value="1" disabled>
            </div>
            <div class="content hide">
                <div class="form-group">
                     <label class="control-label col-md-5"><strong>Adult</strong><br> <i> (above 17)</i></label>
                     <div class="input-group number-spinner col-md-7">
                        <span class="input-group-btn">
                            <a class="btn btn-danger" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></a>
                        </span>
                        <input type="text" disabled name="adult" id="adult" class="form-control text-center" value="1" max=9 min=1>
                        <span class="input-group-btn">
                            <a class="btn btn-info" data-dir="up"><span class="glyphicon glyphicon-plus"></span></a>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                   <label class="control-label col-md-5"><strong>Child</strong><br> <i> (3 - 17)</i></label>
                   <div class="input-group number-spinner col-md-7">
                        <span class="input-group-btn">
                            <a class="btn btn-danger" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></a>
                        </span>
                        <input type="text" disabled name="child" id="child" class="form-control text-center" value="0" max=9 min=0>
                        <span class="input-group-btn">
                            <a class="btn btn-info" data-dir="up"><span class="glyphicon glyphicon-plus"></span></a>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                   <label class="control-label col-md-5"><strong>Infant</strong><br> <i> (belove 2)</i></label>
                   <div class="input-group number-spinner col-md-7">
                        <span class="input-group-btn">
                            <a class="btn btn-danger" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></a>
                        </span>
                        <input type="text" disabled name="infant" id="infant" class="form-control text-center" value="0" max=9 min=0>
                        <span class="input-group-btn">
                            <a class="btn btn-info" data-dir="up"><span class="glyphicon glyphicon-plus"></span></a>
                        </span>
                    </div>
                </div>
                <a class="btn btn-default btn-block demise">Select</a>
            </div>
        </div>
	</div>
</div>

在文本字段中显示引导微调器值

1 个答案: