Question

我目前有一个select，将选项显示为

<option>{{ tag.name }} ({{ tag.count }})</option>

但是，我希望当用户选择该选项时，在所选选项中，只有name可见，而不是最后一部分。想一想stack *如何显示标签计数，但在选择它时会隐藏它。

想法？感谢。

编辑：抱歉不清楚。在chosen中，当您选择一个选项时，文本框会填满所选数据。我希望修改文本，而不是<select>上的文字！

Answer 1

编辑：对于您的编辑，如果选项元素的value属性设置为您要使用的文字，请尝试：

$(document).ready(function() {
    $("select").change(function() {
        $("input").val( $(this).val() );
    }).change();
});

演示：http://jsfiddle.net/CdKGT/2/

或者，如果您出于某种原因无法使用value属性，并希望从显示的内容中提取文字：

$("select").change(function() {
    $("input").val( $("option:selected",this).text().replace(/ \(\d+\)$/,"") );
}).change();

演示：http://jsfiddle.net/CdKGT/3/

显然，您使用ID或类来识别选择和输入，而不仅仅是$("select")和$("input")，但您明白了。

我的原始答案（我对原始问题的解释）：

你可以这样做：

<select>
<option value="css" data-count="1">css 1</option>
<option value="html" data-count="55">html 55</option>
<option value="java" data-count="37">java 37</option>
<option value="javascript" data-count="20">javascript 20</option>
<option value="jquery" data-count="12">jquery 12</option>
</select>

然后：

$(document).ready(function() {
    $("select").change(function() {
        $(this).find("option").html(function(){ return this.value + " " +
                                                       $(this).attr("data-count"); });
        $("option:selected",this).html(this.value);
    }).change();
});

演示：http://jsfiddle.net/CdKGT/1/

（显然你可以通过缓存jQuery对象来优化函数等等，但我保持简单的概念证明。）

Answer 2

选择不支持您想要的功能

Kinda sorta得到了一个解决方法......然而，由于选择内部的东西，它不能始终如一地工作。 http://jsfiddle.net/2hHYh/

选择选项时，选择并不总是触发更改事件，但仍会将显示文本设置为所点击的内容。：O当再次单击相同选项时，这一点尤其明显。

Answer 3

试试这段代码：

$("select").change(
function()
{
    var value = $("option:selected").html()
    var new_value = value.replace(/\s*\([0-9]+\)/, "");
    $("option:selected").html(new_value);
} );

http://jsfiddle.net/fdrGV/

Answer 4

$('select').on('change', function () {
    var _selected = $(this).find('option:selected'),
        _orig = _selected.text();

    var _index = _orig.indexOf(' (');
    _selected.text(_orig.substring(_index, ''));

});

jsFiddle

如何修改jQuery选择所选文本

4 个答案: