小编Nad*_*dia的帖子

根据所选选项的宽度调整选择元素的宽度

我希望select元素的默认选项值的宽度更短.当用户选择另一个选项时,select元素应调整自身大小,以便整个文本始终在元素中可见.

我已经在问题中找到了一个解决方案,根据选择的OPTION宽度自动调整SELECT元素的大小,但它不能用于bootstrap,我不知道为什么.

这是我的尝试:

$(document).ready(function() {
  $('select').change(function(){
    $("#width_tmp").html($('select option:selected').text());
    // 30 : the size of the down arrow of the select box 
    $(this).width($("#width_tmp").width()+30); 
  });
});

Run Code Online (Sandbox Code Playgroud)

.btn-select {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ccc;
  padding:7px;
}
select {
  width: 60px;
}

#width_tmp{
  display : none;
}

Run Code Online (Sandbox Code Playgroud)

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="form-group">
  <div class="input-group">

    <span class="input-group-btn">
      <select class="btn btn-select align-left">
        <option>All</option>
        <option>Longer</option>
        <option>A very very long string...</option>
      </select>
      <span id="width_tmp"></span>
    </span>

    <input type="text" class="form-control" …

Run Code Online (Sandbox Code Playgroud)

javascript jquery html-select twitter-bootstrap twitter-bootstrap-3

Nad*_*dia

2017 05-23

2
推荐指数

1
解决办法

6497
查看次数

在完整日历中显示三个月

有没有办法在完整日历中显示连续 3 个月。我必须使用月视图，并且进行了很多搜索，但没有找到任何解决方案。这就是我想做的。 更多详细信息：我正在使用 Javascript 我尝试过这个，但它没有完全达到我想要的效果。

var calendar = $('#calendar1').fullCalendar({
            header: {
                left: 'prev,next today',
                right: 'title'
            }
        });
        var calendar = $('#calendar2').fullCalendar({
            header: {
                left: 'prev,next today',
                right: 'title'
            }
        });
        var calendar = $('#calendar3').fullCalendar({
            header: {
                left: 'prev,next today',
                right: 'title'
            }
        });

Run Code Online (Sandbox Code Playgroud)

javascript jquery fullcalendar

Nad*_*dia

2016 04-20

1
推荐指数

1
解决办法

4542
查看次数

仅为可见元素插入计数

我有五div他们中的一些具有display:block和其他人display:none,而且是动态变化的.我正在尝试为可见元素添加带有计算的标题.例如,如果我有两个可见元素,第一个应该有"seance 1",第二个应该有"seance 2",但实际上我有两个"seance 2".这是我的代码:

$('#save').click(function() {
  var countVisible = $('.panel-title:visible').length;
  $('.panel-title').filter(':visible').each( function () {
    for (i=0; i<countVisible; i++){
      $(this).text('seance'+(i+1));
    }
  });
});

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel" style="display:none;" id="seance1">
  <h4 class="panel-title"></h4>
</div>
<div class="panel" style="display:block;" id="seance2">
  <h4 class="panel-title">text text</h4>
</div>
<div class="panel" style="display:none;" id="seance3">
  <h4 class="panel-title"></h4>
</div>
<div class="panel" style="display:none;" id="seance4">
  <h4 class="panel-title"></h4>
</div>
<div class="panel" style="display:block;" id="seance5">
  <h4 class="panel-title">text text</h4>
</div>
<button id="save">save</button>

Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

Nad*_*dia

2016 04-21

0
推荐指数

1
解决办法

48
查看次数