Question

我想知道为什么jQuery的.val()函数在我调用replaceWith后没有为我设置<select>控件的值，但是它正在起作用。

<select><option>ABC</option><option>DEF</option></select>
<input type="button" onclick="ControlOff()" value="Turn Off Control" />
<input type="button" onclick="ControlOn()" value="Turn On Control" />
<input type="button" onclick="Test()" value="Value Setting Test" /> 
function ControlOff() {
    $('select').each(function () {
        $(this).replaceWith('<span class="select-type">' + $(this).val() + '</span>');
    });
}

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

function Test() {
    $('select').val('DEF');
}

Answer 1

问题是，$(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>元素，它就会变得混乱。

See here for a working example.

Answer 2

问题在于ControlOn您有一个each循环.select-type元素span，并且无法使用{{1}设置跨度方法：

您可以通过将方法更改为：

来解决此问题

val

实例：http://jsfiddle.net/qSYYc/4/

Answer 3

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

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

Answer 4

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)！

Answer 5

我建议你使用“禁用”属性打开和关闭选择，它不会搞乱.val（）功能

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

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

jQuery .val（）没有设置<select> </select>的值

5 个答案: