jquery - 在更改事件的选项下拉列表中从选定状态中删除空格

Question

在数据查询中，我得到一个树结构：

<select name="parent" id="select_parent">
<option> >Administrator </option>
<option> &nbsp;>Manager </option>
<option> &nbsp;&nbsp;>Sales </option>
<option> &nbsp;&nbsp;>Operator </option>
<option> &nbsp;>Promoter </option>
</select>

显然这在组合框选项上看起来不错，但是当我选择一个值时......这显示为完整的空格。我想要的是当它只是一个选定的值时删除空格。

我试过这个：

$('#select_parent').bind("change",function()
{
    var s = $('#select_parent option:selected').html();
    $('#select_parent option:selected').html(s.replace(/ /g, ''));
});

但是去掉空格后……他们会回来看item是否不再有selected属性？

Answer 1

虽然这看起来很奇怪，但我认为这正是你想要的。您可以将初始值（带空格）保存到每个选项的数据中，并使用存储的值返回默认值。

$("#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());
});​​​​​​​

演示：http: //jsfiddle.net/BkW9h/

Answer 2

如果您希望仅在选择的显示文本中删除间距，但仍以间距显示选定的列表项，您可以尝试以下技巧：

$('#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));
});

的text 属性是不可变的，因此我做了一个小的 css hack，根据它有多少空格select来取消缩进 ' 显示中的选定选项的文本。select

JSFiddle

如果您的页面使用不同的字体或字体大小，请不要忘记删除除 insdeoption文本之外的任何额外间距，并调整以匹配空格字符的宽度（以像素为单位）。space_offset

编辑：我仅在 Chrome 上对其进行了测试，对于 Firefox，它需要额外的 css hacking。

编辑：好的，这是我的最终版本，没有任何 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();
});

JSFiddle

在 Firefox、Chrome、IE 和 Opera 上测试。也应该在 Safari 上工作，因为它是基于 Webkit 的。

Answer 3

我想这会对你有所帮助。

$(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>&nbsp;Manager</option>
<option >&nbsp;&nbsp;Sales</option>
<option>&nbsp;&nbsp;Operator</option>
<option>&nbsp;Promoter</option>
</select>

http://jsfiddle.net/Z48wF/688/

Answer 4

我已经尝试过了，发现这将适用于最新的 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>&nbsp;>Manager</option>
<option>&nbsp;&nbsp;>Sales</option>
<option>&nbsp;&nbsp;>Operator</option>
<option>&nbsp;>Promoter</option>
</select>

Answer 5

这是 Mozilla Firefox 的快速解决方案：

<option style='padding-left:<?=$level*10?>px'>option</option>

这篇文章Indenting HTML options提供了选项的广泛概述。结论：看起来使用 是所有浏览器的最佳解决方案，使用 CSS 样式将增强某些浏览器的显示效果，但不会干扰其他浏览器。