javascript jQuery .val() 没有设置 <select> 的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12727416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .val() not setting the value of <select>
提问by user1589188
I would like to know why jQuery's .val()function is not setting the value of the <select>control for me after I called replaceWith, but it is working otherwise.
我想知道为什么在我调用 replaceWith 后，jQuery 的.val()函数没有<select>为我设置控件的值，但它可以正常工作。
Please see here for a (not) working example.
<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');
}
采纳答案by Jamiec
The problem is that in ControlOnyou have an eachwhich is looping over .select-typeelements which are span's and spans cannot be set with the valmethod:
问题是ControlOn你有一个each循环遍历.select-type元素的span's 和 spans 不能用该val方法设置：
You can fix this by changing the method to this:
您可以通过将方法更改为以下内容来解决此问题：
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);
});
}
Live example: http://jsfiddle.net/qSYYc/4/
现场示例：http: //jsfiddle.net/qSYYc/4/
回答by phant0m
The problem is, that $(this)in $(this).val(selected)refers to the removed<span>element, not your new element. You need to replace it with:
问题是，$(this)in$(this).val(selected)指的是被删除的<span>元素，而不是你的新元素。您需要将其替换为：
$('select').val(selected);
to grab the previously inserted newelement.
抓取之前插入的新元素。
Also, your code is unecessarily complex, this does the same thing, but simpler:
此外，您的代码不必要地复杂，这做同样的事情，但更简单：
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
}
Make sure to give the <select>element an ID, otherwise it's going to mess up once you introduce a new <select>element somewhere else on the page.
确保给<select>元素一个 ID，否则一旦你<select>在页面上的其他地方引入一个新元素，它就会搞砸。
回答by Anoop
回答by Need4Steed
function ControlOn() {
$('.select-type').each(function () {
var selected = $(this).text();
$(this).replaceWith($('<select><option>ABC</option><option>DEF</option></select>').val(selected));
});
}
Rewrite your code like above, it would work!
像上面那样重写你的代码，它会起作用！
The element referenced by thiswon't change to the select element you just created, it will always be the spanelement inside the scope of that function. Therefore you should set the value to the newly created selectinstead of the invariant $(this)!
引用的元素this不会更改为您刚刚创建的 select 元素，它将始终是该span函数范围内的元素。因此，您应该将值设置为新创建的select而不是不变的$(this)！
回答by Maddog
I'd suggest you to use "disabled" attribute to turn select on and off, it, won't mess up the .val() functionality
我建议您使用“禁用”属性来打开和关闭选择，它不会弄乱 .val() 功能
function ControlOff() {
$("select").attr("disabled", "disabled");
}
function ControlOn() {
$("select").removeAttr("disabled");
}
