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 = "&nbsp;&nbsp;&nbsp;&nbsp;";

$(".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 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??
    })
});

更改下拉选定文本而不更改选项文本

3 个答案: