问题是，$(this)in$(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
}

确保给元素一个 ID，否则一旦你在页面的其他地方<select>引入一个新元素，它就会搞砸。<select>

有关工作示例，请参见此处。

设置选项值将解决您的问题。jsfiddle

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

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

像上面那样重写你的代码，它会工作！

引用的元素this不会更改为您刚刚创建的选择元素，它将始终是span该函数范围内的元素。因此，您应该将值设置为新创建select的而不是不变量$(this)！

问题是ControlOn你有一个each循环遍历.select-type元素span的元素，这些元素不能使用以下val方法设置：

您可以通过将方法更改为此来解决此问题：

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