0

データ クエリでは、ツリー構造を取得します。

<select name="parent" id="select_parent">
<option> >Administrator </option>
<option> &nbsp;>Manager </option>
<option> &nbsp;&nbsp;>Sales </option>
<option> &nbsp;&nbsp;>Operator </option>
<option> &nbsp;>Promoter </option>
</select>

明らかに、これはコンボボックスのオプションでは見栄えがしますが、値を選択すると...これはスペースで完全に表示されます。私が望むのは、選択された値のみの場合にスペースを削除することです。

私はこれを試しました：

$('#select_parent').bind("change",function()
{
    var s = $('#select_parent option:selected').html();
    $('#select_parent option:selected').html(s.replace(/&nbsp;/g, ''));
});

しかし、スペースを削除した後...アイテムに選択した属性がなくなったかどうかを確認するために戻ってきますか?

4

5 に答える 5

2

奇妙に見えますが、これはまさにあなたが望むものだと思います。各オプションのデータに初期値 (スペースを含む) を保存し、保存された値を使用してデフォルト値を戻すことができます。

$("#select_parent"​​).on("change", function() {
    $(this).children().text(function(i, value) {
        if (this.selected) return $.trim(value);
        return $(this).data("def_value");
    });
}).children().each(function() {
    $(this).data("def_value", $(this).text());
});​​​​​​​

デモ: http://jsfiddle.net/BkW9h/

于 2012-06-04T18:15:42.433 に答える
2

選択したリスト項目を空白のまま表示し、選択した表示テキストの空白のみを削除したい場合は、次のハックを試すことができます。

$('#select_parent').bind("change", function() {
    var space_offset = 8;
    var matches = $('#select_parent option:selected').text().match(/\s+?/g);
    var n_spaces = (matches) ? matches.length : 0;
    $(this).css('text-indent', -(n_spaces*space_offset));
});

のselecttext プロパティは不変であるため、selectスペースの数に基づいて の表示内で選択したオプションのテキストのインデントを解除するための小さな css ハックを作成しました。

JSFiddle

ページで別のフォントまたはフォント サイズを使用している場合は、テキスト以外の余分なスペースを削除し、スペース文字の幅 (ピクセル単位) に一致&nbsp;するoptionように調整することを忘れないでください。space_offset

編集: Chrome でのみテストしました。Firefox の場合は、追加の css ハッキングが必要です。

編集:さて、これがCSSハックなしの私の最終バージョンです:

var trig = ($.browser.mozilla) ? 'click' : 'mousedown';
$(function() {
    $('#select_parent').on("change", function() {
        var sel = $('#select_parent option:selected');
        $(this).data('cur_val', sel);
        var display = sel.clone();
        display.text($.trim(display.text()));
        sel.replaceWith(display);
        $(this).prop('selectedIndex', display.index());
    }).on(trig, function() {
        if ($(this).prop('selectedIndex') == 0)
            return;
        var sel = $('#select_parent option:selected');
        sel.replaceWith($('#select_parent').data('cur_val'));
        $(this).prop('selectedIndex', 0);
    });
    $('#select_parent').change();
});

JSFiddle

Firefox、Chrome、IE、Opera でテスト済み。Webkit ベースなので、Safari でも動作するはずです。

于 2012-06-04T18:35:34.913 に答える
-1

Mozilla Firefox の簡単な解決策は次のとおりです。

<option style='padding-left:<?=$level*10?>px'>option</option>

この記事HTML オプションのインデント では、オプションの広範な概要を説明しています。結論: &nbsp;CSS スタイリングを使用すると、特定のブラウザーの表示が向上しますが、他のブラウザーには干渉しません。

于 2013-08-22T10:10:58.193 に答える