在数据查询中，我得到一个树形结构。
<select name="parent" id="select_parent">
<option> >Administrator </option>
<option> >Manager </option>
<option> >Sales </option>
<option> >Operator </option>
<option> >Promoter </option>
</select>
很明显，这在组合框选项上看起来很好，但当我选择一个值时... 这显示的是完整的空格。我想要的是当它只是一个选定的值时，去除空格。
我试过这样做。
$('#select_parent').bind("change",function()
{
var s = $('#select_parent option:selected').html();
$('#select_parent option:selected').html(s.replace(/ /g, ''));
});
但在消除空格后... 他们会返回查看项目是否不再有选定的属性？
如果你想在显示选中的列表项时仍然显示间距，同时只在选中的显示文本中去掉间距，你可以试试这个黑客。
$('#select_parent').bind("change", function() {
var space_offset = 8;
var matches = $('#select_parent option:selected').text().match(/\s+?/g);
var n_spaces = (matches) ? matches.length : 0;
$(this).css('text-indent', -(n_spaces*space_offset));
});
这个 select的文本属性是不可改变的，因此我做了一个小的css hack来取消所选选项的文本的缩进。select的显示基于它有多少个空格。
不要忘了去掉多余的间距，除了 在你 option的文本，并调整 space_offset 来匹配空格字符的宽度（像素），如果你的页面使用不同的字体或字体大小。
编辑：我只在Chrome浏览器上测试了它，对于Firefox，它需要额外的css破解。 我只在Chrome浏览器上测试了它，对于Firefox来说，它需要额外的css破解。
编辑：我只在Chrome上测试了它，对于Firefox，它需要额外的css破解。 好吧，这是我的最终版本，没有任何css hack。
var trig = ($.browser.mozilla) ? 'click' : 'mousedown';
$(function() {
$('#select_parent').on("change", function() {
var sel = $('#select_parent option:selected');
$(this).data('cur_val', sel);
var display = sel.clone();
display.text($.trim(display.text()));
sel.replaceWith(display);
$(this).prop('selectedIndex', display.index());
}).on(trig, function() {
if ($(this).prop('selectedIndex') == 0)
return;
var sel = $('#select_parent option:selected');
sel.replaceWith($('#select_parent').data('cur_val'));
$(this).prop('selectedIndex', 0);
});
$('#select_parent').change();
});
在Firefox、Chrome、IE和Opera上测试。由于是基于 Webkit，因此在 Safari 上也应该可以工作。
这看起来很奇怪，但我认为这正是你想要的。您可以将初始值（带空格）保存到每个选项的数据中，并使用存储的值返回默认值。
$("#select_parent").on("change", function() {
$(this).children().text(function(i, value) {
if (this.selected) return $.trim(value);
return $(this).data("def_value");
});
}).children().each(function() {
$(this).data("def_value", $(this).text());
});
DEMO: http:/jsfiddle.netBkW9h
我想这对你会有帮助。
$(function() {
$('#select_parent').on("change", function() {
var sel = $('#select_parent option:selected');
var display = sel.clone();
$(".dummy-label").text($.trim(display.text()));
});
$('#select_parent').change();
});.dummy-label {
position:absolute;
background : #fff;
width : 125px;
height:16px;
top:9px;
left:10px;
pointer-events: none
}
select {
width: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="dummy-label"></span>
<select name="parent" id="select_parent">
<option selected="selected">Select an option</option>
<option>Administrator</option>
<option> Manager</option>
<option > Sales</option>
<option> Operator</option>
<option> Promoter</option>
</select>我已经试过了，发现这个方法可以和最新的jquery一起使用。
isFirefox = typeof InstallTrigger !== 'undefined';
var trig = (isFirefox) ? 'click' : 'mousedown';
$(function() {
$('#select_parent').on("change", function() {
var sel = $('#select_parent option:selected');
$(this).data('cur_val', sel);
var display = sel.clone();
display.text($.trim(display.text()));
sel.replaceWith(display);
$(this).prop('selectedIndex', display.index());
}).on(trig, function() {
if ($(this).prop('selectedIndex') == 0)
return;
var sel = $('#select_parent option:selected');
sel.replaceWith($('#select_parent').data('cur_val'));
$(this).prop('selectedIndex', 0);
});
$('#select_parent').change();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="parent" id="select_parent">
<option selected="selected">Select an option</option>
<option>>Administrator</option>
<option> >Manager</option>
<option> >Sales</option>
<option> >Operator</option>
<option> >Promoter</option>
</select>这里有一个Mozilla Firefox的快速解决方案。
<option style='padding-left:<?=$level*10?>px'>option</option>
这篇文章 缩进HTML选项 提供了一个广泛的选择概述。结论。看起来像使用 是所有浏览器的最佳解决方案，使用CSS样式可以增强某些浏览器的显示效果，但不会干扰其他浏览器。