1

そのため、jQueryを介してドロップダウンのアイテムのテキストを更新しています。したがって、[保存]をクリックすると、選択したアイテムが取得され、テキストが新しい値に変更されます。新しい値が前のテキストよりも長い場合、ドロップダウンの幅は、より長いテキストに合うように正しく増加します。ただし、選択したアイテムのドロップダウンのテキストが最も長く、新しい値が短くなった場合、ドロップダウンの幅は減少するのではなく、同じままになります。それで、ドロップダウンの最長のテキストに自動サイズ変更する方法はありますか？

さらに説明するために、ここに例があります：

ドロップダウンは次のように読み込まれます。

|Test Item 1     |
|Test Item 222222|
|Test Item 33    |

「テストアイテム222222」は「テストアイテム」として保存され、ドロップダウンは次のようになります。

|Test Item 1 |
|Test Item   |
|Test Item 33|

編集-コードを追加する

if ($("input[class~='ButtonPressed']").val() == "Save") {
    // Save the selected item in the dropdown
    var index = $("#Select").get(0).selectedIndex;
    $("#Select option:eq(" + index + ")").text($("#Name").val());
}
4

3 に答える 3

0

すべてのオプション項目を繰り返し処理し、テキストの幅を計算します。次に、ドロップダウンの最も幅の広い設定幅を選択できます。

このjQueryプラグインを使用して、テキスト幅を計算できます。

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};
于 2012-12-19T14:40:42.043 に答える
0

JSFiddle を使用してこれを試してみましたが、ドロップダウンにいくつかのスタイルが適用されているようです (?)。

これをチェックしてください：http://jsfiddle.net/XQfmL/

これは私が JSFiddle で使用したコードです。

<select id="s" size="3">
<option value="aaaaaaaaaaaaaaaaaaaaaa" selected="true">aaaaaaaaaaaaaaaaaaaaaa</option>
<option value="aaa">aaa</option>
<option value="aaaa">aaaa</option>
</select>​
<script>
    //FOR YUI
    YUI().use("node", function(Y){
        var nodes = Y.all("#s option");
        Y.later(2000, nodes.item(0), function(){
            nodes.item(0).set("value","a");
            nodes.item(0).setHTML("a");    
        });
    });

    //FOR JQUERY
    setTimeout(function(){
        $("#s option").eq(0).val("a").html("a");
    }, 2000);​
</script>

2 秒後に更新され、ドロップダウンの幅が自動的に更新されます。

于 2012-12-19T14:52:19.617 に答える
0

HTMLやCSSがなければあまり役に立ちませんが、テキストを持つ要素はブロックまたはインラインブロック要素として表示され、親（コンテナ）要素は特定の幅に制限されないことをお勧めします。自動更新できました。

于 2012-12-19T14:35:53.210 に答える