을 확장하는 방법을'선택'옵션을 폭 후 사용자가 원하는 옵션을 선택하려면

https://stackoverflow.com/questions/294040

08-07-2019
|

문제

어쩌면 이것은 쉬운 질문,그렇지는 않습니다.나는 선택 상자가 나는 하드코드와 함께 폭입니다.말 120px.

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

내가 원하는 것을 보여줄 수 있는 두 번째 옵션을 사용자가 볼 수 있는 충분한 길이의 텍스트입니다.

과 같은 것입니다.이지와 함께 작동하지 않 Internet Explorer6.

해결책

고정 된 옵션이있는 경우 옵션이있는 경우 <select>, 그리고 당신은 프로그래밍 방식으로 너비를 바꾸고 싶지 않으며, 약간 창의적이지 않으면 운이 좋지 않을 수 있습니다.

당신은 시도하고 설정할 수 있습니다 title 각 옵션에 속합니다. 이것은 비표준 HTML이지만 (이 사소한 위반에 관심이있는 경우), 즉, 즉 (및 Firefox)는 마우스 호버의 마우스 팝업에 전체 텍스트를 표시합니다.
사용자가 무언가를 선택할 때 JavaScript를 사용하여 일부 위치 DIV에서 텍스트를 표시 할 수 있습니다. IMHO 이것은입니다 그다지 아니에요 JavaScript가 전혀 작동하지 않기 때문에 작동하는 방법은 만 작동합니다. ~ 후에 무언가가 선택되었습니다 - 값 변경이 있기 전에 선택 상자에 대한 이벤트가 발생하지 않습니다.
선택 상자를 전혀 사용하지 않지만 다른 마크 업 및 CSS를 사용하여 기능을 구현하십시오. 내가 가장 좋아하는 것은 아니지만 언급하고 싶었습니다.

나중에 JavaScript를 통해 긴 옵션을 추가하는 경우 여기를 참조하십시오. html "select"상자를 동적으로 업데이트하는 방법 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>

도움이되기를 바랍니다!

건배, 사이 찬

이것은 당신이 찾고있는 대부분의 행동을 모방합니다.

  <!--

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

<div id=myForm>

그런 다음 정말 간단한 CSS를 만들어 볼 수 있습니다.

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

그게 당신이 필요한 전부입니다.

Select에서 최소 폭과 Max width를 동일한 값으로 설정 한 다음 Select : Focus to 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의 기존 사이트에 사용한 간단한 솔루션 (jQuery를 사용하지만 다시 게시 할 수 있습니다. 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에 데이터를 삽입 한 후이 코드를 추가하여 DropdownList 폭 문제를 해결합니다.

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

좋아,이 옵션은 꽤 해킹되지만 작동해야합니다.

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

언론은 숨겨진 div가 필요합니다.

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

오 그리고 당신은 jQuery가 필요합니다

내가 개선 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.....

CSS 만 사용하여 시도하고 해결할 수 있습니다. 클래스를 선택하여 선택합니다

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

자세한 내용 특정 항목 (옵션) HTML의 상자 스타일 목록

멀티 선택 목록 상자

아주 오래된 질문이지만 여기에 해결책이 있습니다. 여기에는 작업용 스 니펫이 있습니다 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