将选项文本更改为值jquery

我有一个选项列表，我正在尝试用当前选项的值替换所选选项的文本

<select name="sorting-box" class="sort-box" id="sort">
        <option value="Alphabetical">Alphabetical</option>
    <option value="Math: &uarr; to &darr;">Math Required: High to Low</option>
    <option value="Math: &darr; to &uarr;">Math Required: Low to High</option>
            <option value="Lang: &uarr; to &darr;">Second Language Required: High to Low</option>
    <option value="Lang: &darr; to &uarr;">Second Language Required: Low to High</option>
    <option value="Salary: &uarr; to &darr;">Average Starting Salary: High to Low</option>
    <option value="Salary: &darr; to &uarr;">Average Starting Salary: Low to High</option>
        <option value="Credits: &uarr; to &darr;">Credits Required: High to Low</option>
    <option value="Credits: &darr; to &uarr;">Credits Required: Low to High</option>
</select>

$('#sort').change(function(){
        $(this).find('option:selected').text($(this).find('option:selected').attr('value'));
    }); 

按字母顺序排列的
数学要求：从高到低
数学要求：从低到高
所需第二语言：从高到低
所需第二语言：从低到高
平均起薪：从高到低
平均起薪：从低到高
学分要求：从高到低
学分要求：从低到高
$（'#sort'）。更改（函数（）{
$（this.find（$选项：selected'）.text（$（this.find（$选项：selected'）.attr（$值））；
}); 

它与此类似，但我无法确定如果它未被选中，如何使其切换回原来的状态，因此它保持原样

---

我在想也许可以添加一个类，然后在类上检测？任何建议都会有帮助

您可以将数据属性“数据文本”添加到“选项”元素中，并在更改时重置文本。在“更改”处理程序中添加如下内容：

---

您可以使用数据属性存储文本的状态，然后在选择其他选项时将其还原。下面是一个演示：

---

演示代码

html同上

js

---

只需将原始文本存储在选项属性中：

<option value="Math: &uarr; to &darr;" data-original="Math Required: High to Low">Math Required: High to Low</option>

---

尝试用类作为标识符交换值

演示：

完整代码如下：

$('#sort').change(function () {   

    $(this).find('.swapped').text(function (i, v) {
        tmp = v;
        return this.value;
    }).val(function () {
        return tmp;
    }).removeClass('swapped');

    var tmp = $(this).val();
    $(this).find('option:selected')
        .val(function () {
        return this.text;
    }).text(tmp)
        .addClass('swapped');

});

试试这个

$('#sort option').each(function () {
    $(this).data('txt', $(this).text());
});
$('#sort').change(function () {
    $('option', this).each(function () {
        $(this).text($(this).data('txt'));
    });
    $(this).find('option:selected').text($(this).find('option:selected').attr('value'));
});

---

我真的不知道你想做什么。您是否意识到，

$（“#sort”）.value（）

是在下拉列表中选择的值？与其这样做，为什么不添加一个文本框或标签，并用所选值填充标签？我只希望它切换到当前选择的选项。不是所有的。当您使用“更改”处理程序时，您的“当前”选项不再是当前选项-它是您以前的“当前”，因此您不知道替换的是您以前的“当前”。因此，你可以重置所有这些，然后切换到新的“电流”。如果我说得通的话；）也许向“当前”添加一个类可以让您轻松地选择它。我编辑了原始答案，将“标记”交换的optino元素包括在内。这与我的想法相同。谢谢，但我有一个更好的答案。这可能是我见过的最简单的答案。非常感谢。：）@tuffkid拥有几乎完全相同的东西，除了带有数据的额外数据字段。我是带着简单的想法去的。在不使用jquery的情况下添加额外字段对我来说更复杂：P@stepquick-它比其他的更快。也许这需要两行额外的代码。在这个小示例中，性能可能不是问题，但如果有足够的选项，它可能是问题。

$('#sort').change(function() {
    $(this).find('option').each(function() { $(this).text($(this).attr('data-original')); });
    $(this).find('option:selected').text($(this).find('option:selected').attr('value'));
}); 

$('#sort').change(function () {   

    $(this).find('.swapped').text(function (i, v) {
        tmp = v;
        return this.value;
    }).val(function () {
        return tmp;
    }).removeClass('swapped');

    var tmp = $(this).val();
    $(this).find('option:selected')
        .val(function () {
        return this.text;
    }).text(tmp)
        .addClass('swapped');

});

$('#sort option').each(function () {
    $(this).data('txt', $(this).text());
});
$('#sort').change(function () {
    $('option', this).each(function () {
        $(this).text($(this).data('txt'));
    });
    $(this).find('option:selected').text($(this).find('option:selected').attr('value'));
});