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

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

DEMO： 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 example

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

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

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

将选项文本更改为值jquery

5 个答案: