Вопросы Теги

Как развернуть 'избранную' опцию width после того, как пользователь хочет выбрать опцию

27
задан João Pimentel Ferreira 25 March 2019 в 17:57
поделиться

4 ответа

Если у Вас есть опция, существующая ранее в фиксированном - с <select>, и Вы не хотите изменять ширину программно, Вы могли быть неудачливыми, если Вы не становитесь немного творческими.

  • Вы могли попытаться установить эти title атрибут к каждой опции. Это - нестандартный HTML (при заботе об этом незначительном нарушении здесь) но IE (и Firefox также) отобразит весь текст во всплывающем окне мыши на парении мыши.
  • Вы могли использовать JavaScript для показа текста в некотором расположенном DIV, когда пользователь выбирает что-то. По моему скромному мнению, это способ not-so-nice сделать это, потому что это требует JavaScript на работать вообще, и это работает [только 115] после , что-то было выбрано - прежде чем не будет изменение в значении никакой огонь событий для избранного поля.
  • Вы не используете избранное поле вообще, но реализация, это - функциональность с помощью другой разметки и CSS . Не мой фаворит, но я хотел упомянуть его.

, Если Вы добавляете долгую опцию позже через JavaScript, посмотрите здесь: , Как обновить поле HTML “select” динамично в IE

12
ответ дан Community 28 November 2019 в 05:24
поделиться

Я решил свою проблему со следующим кодом: 

<div style="width: 180px; overflow: hidden;">
   <select style="width: auto;" name="abc" id="10">
     <option value="-1">AAAAAAAAAAA</option>
     <option value="123">123</option>
   </select>
</div>

Hope это помогает!

С наилучшими пожеланиями, Cychan

14
ответ дан João Pimentel Ferreira 28 November 2019 в 05:24
поделиться

Хорошо, эта опция является симпатичным hackish, но должна работать. 

$(document).ready( function() {
$('#select').change( function() {
    $('#hiddenDiv').html( $('#select').val() );
    $('#select').width( $('#hiddenDiv').width() );
 }
 }

, Который был бы offcourse требовать скрытого отделения 

<div id="hiddenDiv" style="visibility:hidden"></div>

, ohh и Вы будет нужен jQuery

0
ответ дан Pim Jager 28 November 2019 в 05:24
поделиться

Я улучшил решение cychan, вот так: 

<html>
<head>

<style>
    .wrapper{
        display: inline;
        float: left; 
        width: 180px; 
        overflow: hidden; 
    }
    .selectArrow{
        display: inline;
        float: left;
        width: 17px;
        height: 20px;
        border:1px solid #7f9db9;
        border-left: none;
        background: url('selectArrow.png') no-repeat 1px 1px;
    }
    .selectArrow-mousedown{background: url('selectArrow-mousedown.png') no-repeat 1px 1px;}
    .selectArrow-mouseover{background: url('selectArrow-mouseover.png') no-repeat 1px 1px;}
</style>
<script language="javascript" src="jquery-1.3.2.min.js"></script>

<script language="javascript">
    $(document).ready(function(){
        $('#w1').wrap("<div class='wrapper'></div>");
        $('.wrapper').after("<div class='selectArrow'/>");
        $('.wrapper').find('select').mousedown(function(){
            $(this).parent().next().addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
            $(this).parent().next().removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
            $(this).parent().next().addClass('selectArrow-mouseover');
        }, function(){
            $(this).parent().next().removeClass('selectArrow-mouseover');
        });

        $('.selectArrow').click(function(){
            $(this).prev().find('select').focus();
        });

        $('.selectArrow').mousedown(function(){
            $(this).addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
            $(this).removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
            $(this).addClass('selectArrow-mouseover');
        }, function(){
            $(this).removeClass('selectArrow-mouseover');
        });
    });

</script>
</head>
<body>
    <select id="w1">
       <option value="0">AnyAnyAnyAnyAnyAnyAny</option>
       <option value="1">AnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAny</option>
    </select>

</body>
</html>

PNG, используемые в классах css, загружаются сюда ...

И вам все еще нужен JQuery .....

0
ответ дан 28 November 2019 в 05:24
поделиться
Другие вопросы по тегам:

Похожие вопросы: