ユーザーがオプションを選択した後、「選択」オプションの幅を広げる方法
-
08-07-2019 - |
質問
これは簡単な質問かもしれませんが、そうではないかもしれません。幅でハードコーディングする選択ボックスがあります。 120pxと言います。
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>
2番目のオプションを表示できるようにして、ユーザーがテキスト全体を表示できるようにします。
他のすべてと同様。これはFirefoxでは正常に機能しますが、Internet Explorer6では機能しません。
解決
fixed-with <select>
に既存のオプションがあり、プログラムで幅を変更したくない場合は、少しクリエイティブを取得しない限り運が悪い可能性があります。
- 各オプションに
title
属性を設定してみてください。これは非標準のHTMLです(ここでこの軽微な違反を気にする場合)が、IE(およびFirefox)もマウスホバーのマウスポップアップにテキスト全体を表示します。 - JavaScriptを使用すると、ユーザーが何かを選択したときに、配置されたDIVにテキストを表示できます。私見これはそれを行うためのそれほど良くない方法です。JavaScriptが動作する必要があり、何かが選択された後のみ 動作するからです値の変更であり、選択ボックスに対してイベントは発生しません。
- 選択ボックスはまったく使用しませんが、他のマークアップとCSSを使用して機能を実装します。私のお気に入りではありませんが、言及したかったです。
後でJavaScriptを使用して長いオプションを追加する場合は、 HTMLの更新方法<!>#8220; select <!>#8221; 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を指定します
<div id=myForm>
それから、本当にシンプルなcssを作成します。
#myForm select {
width:200px; }
#myForm select:focus {
width:auto; }
これで十分です。
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>
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();
)を使用して前の幅を保存しますが、これが期待どおりに機能するために必要なことはこれだけです。
サンプル
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");
さて、このオプションはかなりハックですが、動作するはずです。
$(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>
cssクラスで使用されるPNGはここにアップロードされます...
そして、あなたはまだJQueryが必要です.....
cssのみを使用して解決を試みることができます。クラスを追加して選択します
select{ width:80px;text-overflow:'...';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}
詳細については、リストボックススタイル特定のアイテム(オプション)HTML
非常に古い質問ですが、ここに解決策があります。ここでは、jquery
を使用した作業スニペットがあります。メインの選択から選択されたオプションがコピーされる一時的な補助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>