再问个,如何固定select框的宽度不变,并且选择的时候 让下拉列表每行的内容完全显示(在线.散分)

补充一点:
最好是这样解决,
最好是鼠标放在下拉框的某个选项上,通过onmouseover显示该选项的全部内容

解决方案 »

  1.   

    Floating div 
    display perproty
      

  2.   

    用一个DIV模拟显示数据
    当点下拉列表的时候显示div
    下拉列表值不进行下拉：即下拉列表的onclick事件只执行显示div
      

  3.   

    你的这段code，在FF上会工作的好好的，在IE上不行了。这是IE的一个限制。
        <select name="test" size="1" style="width:50;">
        <option>1 </option>
        <option>2 </option>
        <option>3 </option>
        <option selected=true>55555555555555555555555555555555555555555 </option>
        </select> 在IE上，当下拉框拉下时，555555。。那个option就不会完全显示，这没有什么解决办法。这个网页上有我见过的最好的解决办法（除了用JavaScript实现的模拟ComboBox,自己实现一个也挺麻烦的，要考虑鼠标，键盘，等等很多组合，才会实现一个和Select的行为一样的东西).http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php
      

  4.   

    楼主使用javascript自己封装一个select对象吧
    你提出的问题，现有的解决办法都无法达到你的要求
      

  5.   

    <script>
    function showTitle(){
    event.srcElement.title=event.srcElement.options[event.srcElement.selectedIndex].text;
    }
    </script>
    <select name="test" size="1" style="width:50;" onmouseover="showTitle()" onchange="showTitle()"> 
        <option>1 </option> 
        <option>2 </option> 
        <option>3 </option> 
        <option selected=true title='sdsds'>55555555555555555555555555555555555555555 </option> 
        </select> 
    不知道这样算不算完美解决,呵呵
      

  6.   

    那个多余的代码 title='sdsds' 是忘记删掉的没用代码,记得多给分阿,哈哈
      

  7.   

    楼上的在IE6　和FF　下好像不好用哦。我建议LZ 写自己的select　我给个自己写的（用DIV实现，IE　FF下测试）
      

  8.   

    测试页面<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <link href="./styles/selectNode.css" rel="stylesheet" type="text/css"/>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script type="text/javascript" src="./scripts/selectNode.js"></script>
      <script type="text/javascript">
     function init(){
    createSelect('test');
    createSelect('test1');
     }
     
     function test(id){
    var obj = document.getElementById(id);
    alert(obj.getAttribute('value') + "======" +obj.innerHTML)
     }
      </script>
     </HEAD> <BODY onload='init()'>
      <div id=test>
      </div>
      <div>
    <div value='1'>aaa</div>
    <div value='2'>bbb</div>
    <div value='3'>ccc</div>
    <div value='4'>ddd</div>
    </div> <div id=test1>
      </div>
      <div>
    <div value='1'>aaa</div>
    <div value='2'>dfdf</div>
    <div value='3'>ccc</div>
    <div value='4'>ddd</div>
    </div>
    <br>
    <br>
    <input type='button' onclick='test("test")' value='testData'/>
    <input type='button' onclick='test("test1")' value='test1Data'/>
     </BODY>
    </HTML>
      

  9.   

    CSS　和JS.value_div_bg{
    width:200px;
    height: 24px;
    border: 1px solid #888888;
    float: left;
    padding-top: 5px;
    padding-left: 3px;
    background: url( ../images/select/select_bg.bmp ) 98% center no-repeat;
    }
    .data_div{
    border: 1px solid #888888; width: 100%;background-color: white;display:none;
    position:absolute;
    }
    .itemDiv{
    display: block;
    padding-left: 3px;
    padding-top: 3px;
    width:100%;
    height: 20px;
    border-top:1px dotted white;
    border-bottom:1px dotted white;
    cursor: pointer;
    }
    .pickDiv{
    display: block;
    width:100%;
    background-color: #DDDBD6;
    border-top:1px dotted black;
    border-bottom:1px dotted #888888;
    cursor: pointer;
    padding-left: 3px;
    padding-top: 3px;
    height: 20px;
    }
    a:link {
    color: #000;
    text-decoration: none;
    }
    a:visited {
    color: #000;
    text-decoration: none;
    }
    a:hover {
    color: #000;
    text-decoration: none;
    }
    a:active {
    color: #000;
    text-decoration: none
    }

    //浏览器类型以及版本
    var brow = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/msie (\d+)/)) ? brow.ie = s[1] :
    (s = ua.match(/firefox\/(\d+)/)) ? brow.firefox = s[1] :
    (s = ua.match(/chrome\/(\d+)/)) ? brow.chrome = s[1] :
    (s = ua.match(/opera.(\d+)/)) ? brow.opera = s[1] :
    (s = ua.match(/version\/(\d+).*safari/)) ? brow.safari = s[1] : 0;

    function addEventHandler(element,eventN,eventM){
    if(!element){
    return;
    }
    if(element.addEventListener){
    element.addEventListener(eventN,eventM,false);
    }else if(element.attachEvent){
    element.attachEvent('on'+eventN,eventM)
    }else{
    element['on'+eventN] = eventM;
    }
    }

    function removeEventHandler(element,eventN,eventM){
    if(!element){
    return;
    }
    if(element.removeEventListener){
    element.removeEventListener(eventN,eventM,false);
    }else if(element.detachEvent){
    element.detachEvent('on' + eventN,eventM);
    }else{
    element['on' + eventN] = null;
    }
    }
    function getNode(id){
    return typeof(id) == 'string' ? document.getElementById(id) : id;
     }  function createSelect(id){
    var obj = getNode(id);
    var dataAll = getNextChild(obj);
    if(dataAll){
    if(dataAll.tagName == "DIV"){
    if(dataAll.innerHTML != ''){
    obj.className = 'value_div_bg';
    dataAll.className = 'data_div';
    dataAll.style.top = obj.offsetTop + obj.offsetHeight + 'px';
    dataAll.style.left = obj.offsetLeft + 'px';
    dataAll.style.width = (brow.ie ? obj.offsetWidth : obj.clientWidth) + 'px';
    addEventHandler(document,'click',
    function(e){
    var event = e.target || window.event.srcElement;
    if(obj == event){
    dataAll.style.display = 'block';
    return;
    }
    if(dataAll != event)
    dataAll.style.display = 'none';
    }
    )
    changeCurData(obj,getFirstChild(dataAll.childNodes[0]));
    var data = getChildren(dataAll);
    for(var i=0; i<data.length;i++){
    data[i].className = "itemDiv";
    addEventHandler(data[i],'mouseover',
    function(e){var event = e.target || window.event.srcElement;event.className = 'pickDiv';}
    );
    addEventHandler(data[i],'mouseout',
    function(e){ var event = e.target || window.event.srcElement;event.className = 'itemDiv';}
    );
    addEventHandler(data[i],'click',
    function(e){var event = e.target || window.event.srcElement;dataAll.style.display = 'none';changeCurData(obj,event);}
    );
    }
    }else{
    document.body.removeChild(dataAll);
    }
    }
    }

     }  function changeCurData(objChange, objSource){
    objChange.setAttribute('value',objSource.getAttribute('value'));
    objChange.innerHTML = objSource.innerHTML;
     } function getNextChild(obj){
    var child = obj.nextSibling;
    var childTagName = obj.tagName;
    while (child) {
    if (child.tagName == childTagName.toUpperCase()) {
    return child;
    }
    child = child.nextSibling;
    }
    return null;
    }

    function getFirstChild(child){
    while (child) {
    if (child.nodeType == 1) {
    return child;
    }
    child = child.nextSibling;
    }
    return null;
    } function getChildren(parentObj){
    var child = parentObj.firstChild;
    var items = [];
    while (child) {
    if (child.nodeType == 1) {
    items.push(child);
    }
    child = child.nextSibling;
    }
    return items;
    }