問題は、新しい要素ではなく、削除された$(this)要素を$(this).val(selected)参照することです。次のように置き換える必要があります。 <span>

$('select').val(selected);

以前に挿入された新しい要素を取得します。

また、あなたのコードは不必要に複雑です。これは同じことを行いますが、より単純です。

function ControlOn() {
    $selectText = $('.select-type');
    var selected = $selectText.text();
    $selectText.replaceWith('<select><option>ABC</option><option>DEF</option></select>');
    $('select').val(selected); // Use an id instead to match: #my-select-id
}

要素に必ず<select>ID を付けてください。そうしないと、ページの別の場所に新しい<select>要素を導入したときに混乱します。

実際の例については、こちらを参照してください。

function ControlOn() {
    $('.select-type').each(function () {
        var selected = $(this).text();
        $(this).replaceWith($('<select><option>ABC</option><option>DEF</option></select>').val(selected));
    });
}

上記のようにコードを書き直してください。

によって参照さthisれる要素は、作成したばかりの select 要素に変更されず、常にspanその関数のスコープ内の要素になります。selectしたがって、不変式の代わりに新しく作成された値を設定する必要があります$(this)。

オプションの値を設定すると、問題が解決します。jsfiddle

<select><option value='ABC'>ABC</option><option value="DEF">DEF</option></select>

問題は、 である要素をループしてControlOnいるがあり、メソッドでスパンを設定できないことです。each.select-typespanval

メソッドを次のように変更することで、これを修正できます。

function ControlOn() {
    $('.select-type').each(function () {
        var selected = $(this).text();
        var $select = $('<select><option>ABC</option><option>DEF</option></select>');
        $(this).replaceWith($select)
        $select.val(selected);
    });
}

実際の例: http://jsfiddle.net/qSYYc/4/

「無効」属性を使用して選択のオンとオフを切り替えることをお勧めします。これにより、.val() 機能が混乱することはありません。

function ControlOff() {
    $("select").attr("disabled", "disabled");
}

function ControlOn() {
    $("select").removeAttr("disabled");
}