jquery - 将选项文本更改为值 jquery

Question

我有一个选项列表，我想做的是将所选选项的文本替换为当前选项的值。

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

http://jsfiddle.net/3Eq2A/

它与此类似，但如果未选择它，我无法确定如何让它切换回来，所以它保持原样。

我在想也许可以添加一个类，并在类上检测？任何的意见都将会有帮助。

Answer 1

您可以使用数据属性来存储文本的状态，然后在选择另一个选项时恢复它。这是一个演示：http: //jsfiddle.net/3Eq2A/3/

---

演示代码

html和上面一样

js

$('#sort').change(function(){
 var $prev = $('.tempSelect',this);
 if( $prev.length > 0 ){
  $prev.text($prev[0].getAttribute("data-text"));
  $prev[0].removeAttribute("data-text");
  $prev.removeClass('tempSelect');
 }
 var $sel = $(this).find('option:selected');
 $sel.addClass("tempSelect");
 $sel[0].setAttribute("data-text",$sel.text());
 $sel.text($sel.attr('value'));
}); 

Answer 2

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

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

而且你可以轻松实现你想要的：

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

Answer 3

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

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

完整代码如下，

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

});

Answer 4

试试这个jsFiddle 例子

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

Answer 5

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

$("#sort").change(function(){
    var $swapped = $(this).find(".swapped");
    var $selected = $(this).find("option:selected");

    $swapped.text($swapped.data("text")).removeClass("swapped");

    $selected.text($(this).find('option:selected').attr('value')).addClass("swapped");
});