web-dev-qa-db-ja.com

ユーザーがオプションを選択した後、「選択」オプションの幅を広げる方法

これは簡単な質問かもしれませんが、そうではないかもしれません。幅でハードコーディングする選択ボックスがあります。 120pxと言います。

<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

ユーザーにテキストの全長を表示できるように、2番目のオプションを表示できるようにします。

他のすべてのように。これはFirefoxでは正常に機能しますが、Internet Explorer6では機能しません。

jquerycsshtml-selectcontent-length
26
Berlin Brown

Fixed-withで既存のオプションがある場合<select>、およびプログラムで幅を変更したくない場合は、少し創造力を発揮しない限り、運が悪くなる可能性があります。

  • title属性を各オプションに設定してみてください。これは非標準のHTMLです（ここでこの軽微な違反を気にする場合）が、IE（およびFirefox）もマウスホバーのマウスポップアップでテキスト全体を表示します。
  • ユーザーが何かを選択すると、JavaScriptを使用して、配置されたDIVにテキストを表示できます。私見これはnot-so-Niceの方法です。JavaScriptをオンにする必要があり、動作するのはafter何かが選択された-値が変更されるまで、選択ボックスに対してイベントは発生しません。
  • 選択ボックスはまったく使用しませんが、 他のマークアップとCSSを使用して機能を実装します 。私のお気に入りではありませんが、言及したかったのです。

後でJavaScriptを使用して長いオプションを追加する場合は、こちらをご覧ください。 IEでHTMLの「選択」ボックスを動的に更新する方法

12
Tomalak

次のコードで問題を修正しました。

<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>

それが役に立てば幸い！

乾杯、Cychan

14
cychan

これは、探しているほとんどの動作を模倣しています。

  <!--

     I found this works fairly well.

  -->

  <!-- On page load, be sure that something else has focus. -->
  <body onload="document.getElementById('name').focus();">
  <input id=name type=text>

  <!-- This div is for demonstration only.  The parent container may be anything -->
  <div style="height:50; width:100px; border:1px solid red;">

  <!-- Note: static width, absolute position but no top or left specified, Z-Index +1 -->
  <select
   style="width:96px; position:absolute; z-index:+1;"
   onactivate="this.style.width='auto';"
   onchange="this.blur();"
   onblur="this.style.width='96px';">
  <!-- "activate" happens before all else and "width='auto'" expands per content -->
  <!-- Both making a selection and moving to another control should return static width -->

  <option>abc</option>
  <option>abcdefghij</option>
  <option>abcdefghijklmnop</option>
  <option>abcdefghijklmnopqrstuvwxyz</option>

  </select>

  </div>

  </body>

  </html>

これにより、キーを押す動作の一部がオーバーライドされます。

5
Doug Peil

bootstrapページで、selectでmin-widthとmax-widthを同じ値に設定し、select：focusをautoに設定することで修正しました。

select {
  min-width: 120px;
  max-width: 120px;
}
select:focus {
  width: auto;
}
<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>
3
iansoccer9

Divに配置し、idを与えます

<div id=myForm>

次に、本当にシンプルなCSSを作成して、それに合わせます。

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

必要なのはそれだけです。

3
tpham211

非常に古い質問ですが、ここに解決策があります。ここに、jqueryを使用した作業スニペットがあります。メインのselectが持つべき真の幅を評価できるように、メインの選択から選択されたオプションがコピーされる一時的な補助selectを使用します。

$('select').change(function(){
  var text = $(this).find('option:selected').text()
  var $aux = $('<select/>').append($('<option/>').text(text))
  $(this).after($aux)
  $(this).width($aux.width())
  $aux.remove()
}).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>ABC</option>
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
</select>
2
João Pimentel Ferreira

IE（jQueryを使用しますが、実際にJSがよくわからない場合はeventListenerコードでポストバックできます）の既存のサイトに使用した簡単なソリューションは以下：

_if (jQuery.browser.msie) {
  jQuery('#mySelect').focus(function() {
    jQuery(this).width('auto');
  }).bind('blur change', function() {
    jQuery(this).width('100%');
  });
};
_

もちろん、変数（var cWidth = jQuery('#mySelect').width();）を使用して前の幅を保存しますが、これが期待どおりに機能するために必要なことはこれだけです。

1
Eric

サンプル

function PopulateDropdown() {
    $.ajax({
        type: "POST",
        url: "../CommonWebService.asmx/GetData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            $("select[id^='MyDropDown']").empty();
            $.each(msg.d, function () {
                $("select[id^='MyDropDownSelect']").append($("<option></option>").val(this['IdIndexDataType']).html(this['DataTypeName']));
            }); 
            $("select[id^='MyDropDown']").css("width", "auto");  
        },
        error: function (e1) {
            alert("Error - " + e1.toString());
        }
    });
}

以下のコードは、データをドロップダウンリストに挿入した後にこのコードを追加することにより、ドロップダウンリストの幅の問題を解決します。

$("select[id^='MyDropDown']").css("width", "auto");
1
Doni

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>

cssクラスで使用されるPNGはここにアップロードされます...

そして、あなたはまだJQueryが必要です.....

0
Saeed

あなただけのCSSを使用して解決しようとすることができます。選択するクラスを追加することにより

select{ width:80px;text-overflow:'...';-ms-text-overflow:Ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}

詳細については 特定のアイテム（オプション）HTMLのリストボックススタイル

複数選択リストボックス

0
Web Designer cum Promoter

さて、このオプションはかなりハックですが、動作するはずです。

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

オフコースには隠しdivが必要です。

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

ああ、あなたはjQueryが必要になります

0
Pim Jager