Question

所以我有两个选择：

.jqTransformHidden {
    display: none
}

.jqTransformInputWrapper {
    border: 1px solid #2a2824;
    position: relative;
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    float: right;
    height: 21px;
}
.jqTransformTextarea {
    position: relative;
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    height: 64px;
    margin-top: 4px
}

.jqTransformSelectWrapper {
    position: relative;
    float: right;
}
.jqTransformSelectWrapper div {
    font: 12px Arial, Helvetica, sans-serif;
    color: #72716f;
    display: block;
    position: relative;
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #2a2824;
    background: none;
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px
}
.jqTransformSelectWrapper div span {
    padding: 0 0 0 5px;
    display: block;
    background-color: white;
}
a.jqTransformSelectOpen {
    display: block;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 19px;
    height: 19px;
    background: url(../images/select.gif) no-repeat
}
.jqTransformSelectWrapper ul {
    color: black;
    position: absolute;
    top: 24px;
    left: 0;
    background: #ffffff;
    border: 1px solid #2a2824;
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    display: none;
    z-index: 10;
    padding: 5px 0;
    height: 50px;
    overflow: auto;
}
.jqTransformSelectWrapper ul a {
    display: block;
    padding: 0 5px;
    text-decoration: none;
    line-height: 20px;
    color: black;
}
.jqTransformSelectWrapper ul a.selected {
    color: #000;
    background-color: white;
}
.jqTransformSelectWrapper ul a:hover,
.jqTransformSelectWrapper ul a.selected:hover {
    color: #fff;
    background: #2a2824
}

<div class="select1">
   <div class="jqTransformSelectWrapper" style="z-index: 9; width: 140px;">
      <div><span style="width: 132px;">&nbsp;</span><a href="#" class="jqTransformSelectOpen"></a></div>
      <ul style="width: 138px; display: none; visibility: visible; height: 40px; overflow: hidden;">
         <li><a href="#" index="0" class="selected">&nbsp;</a></li>
         <li><a href="#" index="1">...</a></li>
      </ul>
      <select class="jqTransformHidden" style="">
         <option>This</option>
         <option>That</option>
      </select>
   </div>
</div>
Number in Party:
</div>	
<div class="row">
   <div class="select2">
      <div class="jqTransformSelectWrapper" style="z-index: 8; width: 44px;">
         <div><span style="width: 34px;">&nbsp;</span><a href="#" class="jqTransformSelectOpen"></a></div>
         <ul style="width: 42px; display: none; visibility: visible; height: 40px; overflow: hidden;">
            <li><a href="#" index="0" class="selected">&nbsp;</a></li>
            <li><a href="#" index="1">...</a></li>
         </ul>
         <select class="jqTransformHidden" style="">
            <option>&nbsp;</option>
            <option>...</option>
         </select>
      </div>
   </div>
   <div class="select2">
      <div class="jqTransformSelectWrapper" style="z-index: 7; width: 44px;">
         <div><span style="width: 34px;">&nbsp;</span><a href="#" class="jqTransformSelectOpen"></a></div>
         <ul style="width: 42px; display: none; visibility: visible; height: 40px; overflow: hidden;">
            <li><a href="#" index="0" class="selected">&nbsp;</a></li>
            <li><a href="#" index="1">...</a></li>
         </ul>
         <select class="jqTransformHidden" style="">
            <option>&nbsp;</option>
            <option>...</option>
         </select>
      </div>
   </div>
   <div class="select2">
      <div class="jqTransformSelectWrapper" style="z-index: 6; width: 44px;">
         <div><span style="width: 34px;">&nbsp;</span><a href="#" class="jqTransformSelectOpen"></a></div>
         <ul style="width: 42px; display: none; visibility: visible; height: 40px; overflow: hidden;">
            <li><a href="#" index="0" class="selected">&nbsp;</a></li>
            <li><a href="#" index="1">...</a></li>
         </ul>
         <select class="jqTransformHidden" style="">
            <option>&nbsp;</option>
            <option>...</option>
         </select>
      </div>
   </div>
   Arrival Date:
</div>

问题是我无法扩展选择选择选项。我找不到解决办法，这是我第一次遇到这个问题。

// Edit2 javascript for select

$.fn.jqTransSelect = function(){
        return this.each(function(index){
            var $select = $(this);

            if($select.hasClass('jqTransformHidden')) {return;}
            if($select.attr('multiple')) {return;}

            var oLabel  =  jqTransformGetLabel($select);
            /* First thing we do is Wrap it */
            var $wrapper = $select
                .addClass('jqTransformHidden')
                .wrap('<div class="jqTransformSelectWrapper"></div>')
                .parent()
                .css({zIndex: 10-index})
            ;

            /* Now add the html for the select */
            $wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');
            var $ul = $('ul', $wrapper).css('width',$select.width()).hide();
            /* Now we add the options */
            $('option', this).each(function(i){
                var oLi = $('<li><a href="#" index="'+ i +'">'+ $(this).html() +'</a></li>');
                $ul.append(oLi);
            });

            /* Add click handler to the a */
            $ul.find('a').click(function(){
                    $('a.selected', $wrapper).removeClass('selected');
                    $(this).addClass('selected');   
                    /* Fire the onchange event */
                    if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
                    $select[0].selectedIndex = $(this).attr('index');
                    $('span:eq(0)', $wrapper).html($(this).html());
                    $ul.hide();
                    return false;
            });
            /* Set the default */
            $('a:eq('+ this.selectedIndex +')', $ul).click();
            $('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
            oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
            this.oLabel = oLabel;

            /* Apply the click handler to the Open */
            var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
                .click(function(){
                    //Check if box is already open to still allow toggle, but close all other selects
                    if( $ul.css('display') == 'none' ) {jqTransformHideSelect();} 
                    if($select.attr('disabled')){return false;}

                    $ul.slideToggle('fast', function(){                 
                        var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
                        $ul.animate({scrollTop: offSet});
                    });
                    return false;
                })
            ;

            // Set the new width
            var iSelectWidth = $select.outerWidth();
            var oSpan = $('span:first',$wrapper);
            var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width();
            $wrapper.css('width',newWidth);
            $ul.css('width',newWidth-2);
            oSpan.css({width:iSelectWidth});

            // Calculate the height if necessary, less elements that the default height
            //show the ul to calculate the block, if ul is not displayed li height value is 0
            $ul.css({display:'block',visibility:'hidden'});
            var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff
            (iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff
            $ul.css({display:'none',visibility:'visible'});

我完全忘记了这一点，我对js的了解非常基础所以bug可能在这里，感谢@Ujwol Shrestha提到。

Answer 1

我没有看到JS与上述标记相关。

无法展开选择选项html

1 个答案: