JQuery не отображает выбранную ширину

0

Я использую выбранный 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');
    }
});
  • 0
    Вместо $ ("option: selected", this) .val () вы можете использовать $ (this) .val ()
  • 0
    Спасибо, но не решает мою проблему :(
Показать ещё 3 комментария
Теги:
jquery-chosen

4 ответа

1
Лучший ответ

Некоторое время назад у меня была эта проблема, вот мое предложение:

Сначала добавьте # дневной список id во второй раскрывающийся список.

Добавить прослушиватель событий в первый (# месяц-список) выпадающий список

$('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 width if it was not hardocoded)
        $('select#day-list').closest('.chosen-container').css('width', mlCssWidth);
});

Конечно, вы можете кэшировать объекты/функции jQuery для упрощения/производительности.

PS: Было бы проще, если бы вы поместили его в jsfiddle ;-)

Поделиться
  • 0
    Мне удалось разобраться в этом, зайдя внутрь и добавив ширину к генерируемому элементу chzn. Это странно, так это
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
};

работает на меня ;)

Поделиться
  • 3
    Да, как будто это хорошая вещь для редактирования основных файлов.
  • 0
    Это работа! Большое спасибо.
Показать ещё 1 комментарий
7

Попробуй это...

$("selector").chosen({
   width: '100%'
});
Поделиться
1 
$('selector').chosen('destroy'); 
$("selector").chosen({ width: '100%' });

или

$("selector").data("chosen").destroy().chosen();
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню