Question

我有一个带有选项项目的选择菜单

<select>
<option>--1</option>
<option>--2</option>
<option>--3</option>
<option>--4</option>
</select>

当我从选择菜单中选择一个项目时，它会在框中显示' - 2'。我只想在所选项目框中显示'2'。我怎么能这样做？

如果我在jQuery中获得解决方案，那将更为可取。

注意：我不希望随时更改下拉菜单中显示的值，但选择框中显示的值不得为“ - ”（短划线）。

Answer 1

您尝试做的似乎是拥有显示值和Javascript可以读取的值。在这种情况下，我建议您更改select元素，而不是编写自定义javascript来更改外观。这听起来可能会解决您的问题。

我会根据以下内容编写select：

<select>
    <option value="--1">1</option>
    <option value="--2">2</option>
    <option value="--3">3</option>
    <option value="--4">4</option>
</select>

然后读取值而不是option元素的文本（参见：http://www.w3schools.com/TAGS/tag_option.asp）

你提出的解决方案很难用javascript或jquery来解决，除非你用自定义元素覆盖整个select。

Answer 2

alert("--1".replace("--", ""));

这样：

$("select").change(function() {
    $("#someInput").val($(this).val().replace("--", ""));
});

Try it here.

Answer 3

如果只想替换所有条目，可以致电

$(function() {
    $('select').find('option').each(function(index,elem) {
        $(elem).text(function(i, text) {
            return text.replace(/^--/, '');
        });
    });
});

如果您只想在选择时替换条目

$(function() {
    $('select').bind('change', function() {
        var self = this;

        $(this).find('option:selected').text(function(i, text) {
            if( self.last )
                $(self.last).text(function(i, oldtext) {
                    return '--' + oldtext;
                });

            self.last = this;

            return text.replace(/^--/, '');
        });
    });
});

演示：http://www.jsfiddle.net/4yUqL/39/

更改选择菜单onChange事件的选定框中的文本

3 个答案: