0

我正在使用 jquery selected 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');
    }
});
4

4 回答 4

9

更改 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
};

为我工作；）

于 2014-03-06T11:48:35.567 回答
7

尝试这个...

$("selector").chosen({
   width: '100%'
});
于 2015-01-08T11:43:39.850 回答
1

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

首先将#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中会更简单;-)

于 2013-10-28T20:24:06.613 回答
1 
$('selector').chosen('destroy'); 
$("selector").chosen({ width: '100%' });

或者

$("selector").data("chosen").destroy().chosen();
于 2015-11-19T06:05:51.077 回答