更改下拉菜單中選擇文本，而不更改選項文本

Question

我有一個縮進下拉列表，在這裏我有一些根本的選擇和自己的孩子，象下面這樣：

Food 
    Market 
    Restaurants 
    Grossery 
Clothes 
Home 
    TV 

如果我在選擇市場，例如，文本dropdownlist仍然縮進。然後我做了一個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 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, "")); 
}); 

Here is a fiddle to prove the theory

Answer 2

爲什麼不重新設計個性化選項？

東西沿着這些路線：

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 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?? 
    }) 
});