在不更改选项文本的情况下更改下拉选定文本
在不更改选项文本的情况下更改下拉选定文本
提问于 2011-05-15 05:01:48
我有一个缩进的下拉列表，其中有一些根选项及其子选项，如下所示：
Food
Market
Restaurants
Grossery
Clothes
Home
TV例如，如果我选择Market，下拉列表中的文本仍然缩进。然后，我执行了一个jQuery函数来删除文本前的空格。它看起来是这样的：
$(function () {
$("select").change(function () {
var str = jQuery.trim($("select option:selected").text());
$("select option:selected").text(str);
})
}); 它起作用了。但是，如果我在选择Market之后尝试选择其他选项，例如，列表将如下所示：
Food
Market
Restaurants
Grossery
Clothes
Home
TV市场失去了它的缩进。我想要一种方法来删除空格，但只在下拉列表中显示的选定文本，但不在选项中。
我该怎么办？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-05-15 06:01:43
参加派对有点晚了..。
首先，我修改了您的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，以便在加载时使用不间断的空格字符串添加所需的缩进。虽然这不是一个优雅的解决方案，但它是唯一可以在所有浏览器上运行的解决方案--正如您已经明显发现的那样，选项元素是CSS忘记的领域。它还包括change事件移除/添加填充到所选项目的逻辑。
虽然这不是最漂亮的代码，而且我相信有很多性能改进是可以做的(嘿，现在已经很晚了，这是一个大脑转储，因为我对这个问题很感兴趣)，它是有效的。
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
Stack Overflow用户
发布于 2011-05-15 05:24:38
为什么不设计独立的选项呢？
大致是这样的：
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; }Stack Overflow用户
发布于 2011-05-15 05:27:57
为什么要修剪绳子呢？我会添加一个类似下面这样的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??
})
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6004760
复制相关文章
相似问题
腾讯云开发者
