试试这个......

Question

我正在使用jquery选择select并将一个设置为隐藏，如果选择了其他值，则会显示隐藏的值。它可以工作但是当显示的第二个选择时，它不应该是它应该的全宽。

<div class="form-group">
    <label for="textfield1" class="col-xs-3 col-lg-2 control-label">Month: <span class="mandatory">*</span></label>
    <div class="col-sm-9 col-lg-4 controls">
        <select class="form-control input-sm chosen" tabindex="1" data-placeholder="Choose a date..." data-rule-required="true" name="" id="month-list">
            <option value=""></option>
            <option value="FIRST_DAY_RENTAL_PERIOD">First day of rental period</option>
            <option value="LAST_DAY_RENTAL_PERIOD" >Last day of rental period</option>
            <option value="FIRST_CAL_DAY" >First calendar day</option>
            <option value="FIRST_CAL_DAY_PRORATE_DAY" >First calendar day (pro-rate daily)</option>
            <option value="FIRST_CAL_DAY_PRORATE_WEEK" >First calendar day (pro-rate weekly)</option>
            <option value="DAY_OF_MONTH">Specified day of month</option>
        </select>
    </div>
</div>

<div class="month-days">
    <div class="form-group">
        <label for="textfield1" class="col-xs-3 col-lg-2 control-label">Day: <span class="mandatory">*</span></label>
        <div class="col-sm-9 col-lg-4 controls">
            <select class="form-control input-sm chosen" tabindex="1" data-placeholder="Choose a date..." data-rule-required="true" name="" id="">
                <option value=""></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>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
            </select>
        </div>
    </div>
</div>

下面的jquery工作正常，但一旦选择出现它看起来像这样。 http://awesomescreenshot.com/01a1vuw8a1它应显示与其上方月份相同的宽度

$('.month-days').hide();
$('#month-list').change(function(){
    if($("option:selected", this).val() == 'DAY_OF_MONTH'){
        $('.month-days').slideDown('fast');
    }else{
        $('.month-days').slideUp('fast');
    }
});

Answer 1

更改selected.js

container_props = {
        'class': container_classes.join(' '),
        'style': "width: " + (this.container_width()) + ";",
        'title': this.form_field.title
};

到

container_props = {
        'class': container_classes.join(' '),
        'style': "width: 100%;",
        'title': this.form_field.title
};

适合我;）

Answer 2

试试这个......

$("selector").chosen({
   width: '100%'
});

Answer 3

前段时间我遇到过这个问题，这是我的建议：

首先将#day-list id添加到第二个下拉列表。

将事件监听器添加到第一个（＃month-list）下拉列表

$('select#month-list').on(
    'chosen:ready', 
    function() {//fires when first chosen dropdown is ready
        var mlCssWidth = $('select#month-list').closest('.chosen-container').css('width');
        //init second chosen after first one is ready
        $('select#day-list').chosen({/*other options*/, width: mlCssWidth});
    }
);

然后你可以这样做：

$('select#month-list').on(
    'chosen:updated', //or change?
    function() {
        var mlCssWidth = $('select#month-list').closest('.chosen-container').css('width');
        //correct second chosen width after first one is changed (and may have changed it's width if it was not hardocoded)
        $('select#day-list').closest('.chosen-container').css('width', mlCssWidth);
});

当然，您可以缓存jQuery对象/函数以简化/性能。

PS：如果你把它放在jsfiddle中会更简单; - ）

Answer 4

$('selector').chosen('destroy'); 
$("selector").chosen({ width: '100%' });

或

$("selector").data("chosen").destroy().chosen();

JQuery没有显示全宽度选择

4 个答案:

试试这个......