更改下拉選定文本而不更改選項文本

Question

我有一個縮進的下拉列表，我有一些根選項和他們的孩子，如下所示：

Food
    Market
    Restaurants
    Grossery
Clothes
Home
    TV

例如，如果我選擇市場，則下拉列表中的文本仍會縮進。 然后我做了一個jQuery函數來刪除文本前的空格。 它看起來像這樣：

$(function () {
    $("select").change(function () {
        var str = jQuery.trim($("select option:selected").text());

        $("select option:selected").text(str);
    })
}); 

有用。 但是，如果我在選擇市場后嘗試選擇其他選項，例如，列表如下所示：

Food
Market
    Restaurants
    Grossery
Clothes
Home
    TV

市場失去了它的縮進。 我想要一種方法來刪除空格，但只在下拉列表中顯示的選定文本中，但不在選項中。

我該怎么辦？

Answer 1

為什么不改變單個選項的風格呢？

這些方面的東西：

HTML：

<select>
    <option>Food</option>
    <option class='sub'>Market</option>
    <option class='sub'>Restaurants</option>
    <option class='sub'>Grossery</option>
    <option>Clothes</option>
    <option>Home</option>
    <option class='sub'>TV</option>
</select>

CSS：

option.sub { text-indent: 2em; }

Answer 2

在這里聚會遲到了......

首先，我修改了你的HTML，在每個選項元素上包含一個類，以指示它應該縮進的級別。

<select class="select">
    <option value="1" class="level-0">Item 1</option>
    <option value="2" class="level-1">Item 1.1</option>
    <option value="3" class="level-2">Item 1.1.1</option>
    <option value="4" class="level-1">Item 1.2</option>
</select>

我還編寫了jQuery，使用一串不間斷的空格在加載時添加所需的縮進。 雖然這不是一個優雅的解決方案，但它是唯一可以在所有瀏覽器中運行的解決方案 - 正如您明顯發現的那樣，OPTION元素是遺忘的土地CSS。 它還包括更改事件的邏輯，用於刪除/添加填充到所選項目。

雖然它不是最漂亮的代碼，但我確信可以進行很多性能改進（嘿，這里已經很晚了，這是一個大腦轉儲，因為我對這個問題很感興趣），它的確有效。

var levelClassPrefix = "level-";
var indentationString = "    ";

$(".select").each(function() {
    padOptions(this);
});

function padOptions(elem) {
    $("OPTION", elem).each(function() {
        var level = $(this).attr("class").replace(levelClassPrefix, "");
        var currentText = $(this).html();
        var regex = new RegExp(indentationString , "g");
        $(this).html(padText(currentText.replace(regex, ""), level))
    });        
}

function padText(value, level) {
    var output = "";
    for (var i = 1; i <= level; i++) {
        output = output + indentationString;
    }
    return output + value;
}

$(".select").change(function() {
    padOptions(this);

    var selectedOption = $("option:selected", this);
    var currentText = selectedOption .html();
    var regex = new RegExp(indentationString , "g");
    selectedOption.text(currentText.replace(regex, ""));
});

這是證明這一理論的小提琴

Answer 3

為什么修剪弦樂？ 我會添加一個類似於此的css類

select .level0 {}

select.level1 {
    text-indent: -1.5em; /* you have to calculate your indentation value */
}

select.level2 {
    text-indent: -3em; /* you have to calculate your indentation value */
}

相應地偽造html

<select>
    <option class='level0'>Food</option>
    <option class='level1'>Market</option>
    <option class='level1'>Restaurants</option>
    <option class='level1'>Grossery</option>
    <option class='level0'>Clothes</option>
    <option class='level0'>Home</option>    
    <option class='level1'>TV</option>
</select>

並相應地應用該課程。 也許，我不知道jquery，你必須

$(function () {
    $("select").change(function () {
        var theclass = $("select option:selected").class();
        $("select option:selected").set(class, theClass); // <-- is this jquery??
    })
});