更改下拉菜单中选择文本，而不更改选项文本

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