1

オプションのリストがあり、選択したオプションのテキストを現在のオプションの値に置き換えようとしています。

<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/

これに似ていますが、選択されていない場合に元に戻す方法がわからないので、そのままにしておきます。

クラスを追加して、クラスを検出することを考えていましたか？どんな提案も役に立ちます。

4

5 に答える 5

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'));
});
于 2013-03-12T21:02:05.857 に答える
1

元のテキストを option 属性に保存するだけです:

<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'));
});
于 2013-03-12T21:02:17.313 に答える
1

クラスを識別子として値を交換してみてください。

デモ: 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');

});
于 2013-03-12T21:02:46.053 に答える
1

この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'));
});
于 2013-03-12T21:04:49.310 に答える
-1

データ属性「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");
});
于 2013-03-12T20:57:07.553 に答える