将选项文本更改为值jquery

问题描述：

我有一个选项列表，我试图做的是用当前选项的值替换选定选项的文本。将选项文本更改为值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')); 
    });

http://jsfiddle.net/3Eq2A/

这是与此类似，但我不能确定如何进行，如果不是选择它，它切换回，所以给人们留下它，它的样子。

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

我真的不能告诉你想要做什么。你知道'$（“＃sort”）。value（）'是在下拉列表中选择的值吗？ – jfriend00 2013-03-12 20:57:35

而不是做所有这些，为什么不只是添加文本框或标签，并使用所选值填充标签？ – 2013-03-12 20:57:40

答

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

这可能是我见过的最简单的答案。非常感谢你。 :) – stepquick 2013-03-12 21:13:57

如果不是简单的话，我什么都不是：P – j08691 2013-03-12 21:15:08

@tuffkid几乎完全一样，除了带数据的额外数据字段。我正在考虑简单。添加一个额外的字段，而不使用jQuery来做，对我来说更加复杂。：P – stepquick 2013-03-12 21:16:53

答

您可以将数据属性“data-text”添加到“选项”元素中，并在更改时重置文本。加入这样的事情你“变”的处理程序：

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

我只希望它切换为当前选定的选项。不是所有的人。 – stepquick 2013-03-12 21:01:38

当您到达“更改”处理程序时，您的“当前”选项不再是当前选项 - 这是您之前的“当前”选项，因此您不知道哪个是您之前替换的“当前”选项。所以，这样你就可以重新设置它们，然后为新的“当前”开关。如果我有任何意义;）也许增加一个类到“当前”将使您可以轻松地选择它。 – Floremin 2013-03-12 21:04:47

我编辑了原始答案以包含“标记”交换的optino元素。 – Floremin 2013-03-12 21:12:41

答

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

的演示代码

HTML同上

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

@stepquick - 它比其他人快。也许这需要额外的两行代码。或许这个小例子的表现不是问题，但是如果有足够的选择，它可能是。 – 2013-03-12 21:15:41

答

原文只是存储在选项属性：

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

这是我思考的方式。谢谢，但对我来说有一个更好的答案。 – stepquick 2013-03-12 21:12:52

答

试着用class作为标识符交换值。

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

});

将选项文本更改为值jquery

相关推荐