كيفية توسيع عرض الخيار "تحديد" بعد أن يريد المستخدم تحديد خيار

StackOverflow https://stackoverflow.com/questions/294040

سؤال

ربما هذا سؤال سهل، وربما لا.لدي مربع تحديد حيث أقوم بالترميز الثابت بالعرض.قل 120 بكسل.

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

أريد أن أكون قادرًا على إظهار الخيار الثاني حتى يتمكن المستخدم من رؤية الطول الكامل للنص.

مثل كل شيء آخر.يعمل هذا بشكل جيد في Firefox، لكنه لا يعمل مع Internet Explorer6.

هل كانت مفيدة؟

المحلول

إذا كان لديك الخيار الموجود مسبقًا في ملف ثابت <select>, ، ولا ترغب في تغيير العرض برمجيًا، فقد لا يحالفك الحظ إلا إذا قمت ببعض الإبداع.

  • يمكنك محاولة تعيين title السمة لكل خيار.هذا HTML غير قياسي (إذا كنت مهتمًا بهذه المخالفة البسيطة هنا)، لكن IE (و Firefox أيضًا) سيعرض النص بأكمله في نافذة منبثقة بالماوس عند تحريك الماوس.
  • يمكنك استخدام JavaScript لإظهار النص في بعض DIV الموضعي عندما يحدد المستخدم شيئًا ما.IMHO هذا هو ليس لطيفا طريقة للقيام بذلك، لأنه يتطلب جافا سكريبت للعمل على الإطلاق، ويعمل فقط بعد تم تحديد شيء ما - قبل حدوث تغيير في القيمة، لا يتم إطلاق أي أحداث لمربع التحديد.
  • لا تستخدم مربع تحديد على الإطلاق، ولكن تنفيذ وظائفها باستخدام العلامات الأخرى وCSS.ليس المفضل لدي ولكن أردت أن أذكر ذلك.

إذا كنت ستضيف خيارًا طويلًا لاحقًا من خلال JavaScript، فابحث هنا: كيفية تحديث مربع "تحديد" HTML ديناميكيًا في IE

نصائح أخرى

وأنا ثابت مشكلتي مع التعليمات البرمجية التالية: 

<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

هذا يحاكي معظم السلوك الذي تبحث عنه: 

  <!--

     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>

سيؤدي هذا إلى تجاوز بعض سلوك الضغط على المفاتيح.

وضعه في شعبة واعطائها هوية 

<div id=myForm>

وبعد ذلك إنشاء المغلق حقا حقا بسيطة للذهاب معها. 

#myForm select { 
width:200px; }

#myForm select:focus {
width: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>

وهناك حل بسيط استعملتها لموقع موجود في IE (باستخدام مسج، ولكن يمكنني الرد على الظهر مع رمز eventListener إذا كنت حقا لا أعرف JS ذلك جيدا) هو ما يلي: 

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();) لتخزين العرض السابق، ولكن هذا هو كل ما هو مطلوب لخطايانا للعمل كما كنت تتوقع.

وعينة 

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());
        }
    });
}

ورمز أدناه سوف تحل مشكلتك من عرض دروبدوونليست عن طريق إضافة هذا الرمز بعد إدخال البيانات إلى DropDownList. 

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

حسنا، هذا الخيار هو hackish جدا ولكن يجب أن تعمل. 

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

والتي من شأنها أن تتطلب offcourse وشعبة خفية. 

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

وأوه، وسوف تحتاج مسج

وI تحسين الحل 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 المستخدمة في الطبقات المغلق يتم تحميلها هنا ...

وكنت لا تزال بحاجة مسج .....

والسؤال القديم جدا ولكن هنا هو الحل. هنا لديك قصاصة العمل باستخدام 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()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top