JQuery未显示已选择的全角

pjngdqdw 于 2022-11-03 发布在 jQuery

关注(0)|答案(5)|浏览(105)

我使用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可以正常工作，但是一旦选择的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');
    }
});

jquery

来源：https://stackoverflow.com/questions/19633237/jquery-not-displaying-full-width-chosen

5条答案

按热度按时间

rfbsl7qr1#

更改选择的. 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
};

为我工作;）

赞(0）回复(0）举报 2022-11-03

91zkwejq2#

试试这个...

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

赞(0）回复(0）举报 2022-11-03

iyfjxgzm3#

前段时间我遇到了这个问题，下面是我的建议：
首先将#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里会更简单;- ）

赞(0）回复(0）举报 2022-11-03

0s7z1bwu4#

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

或

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

赞(0）回复(0）举报 2022-11-03

h9vpoimq5#

在隐藏第二个选择元素之前，调用$('second-selector').chosen();，然后隐藏该元素。
稍后当您显示项目时，实际长度会出现在项目上。

赞(0）回复(0）举报 2022-11-03

我来回答

JQuery未显示已选择的全角

5条答案

试试这个...

相关问题

热门标签

最新问答