使用 jQuery 更新输入的值属性答案

【问题标题】：Update Value Attribute of Input with jQuery使用 jQuery 更新输入的值属性
【发布时间】：2015-03-25 09:01:44
【问题描述】：

我正在尝试使用 jQuery 更新表单输入的值。这是我的 HTML：

<div class="form-group">
    <label for="fb-updateDefaultValue">Default Value</label>
    <input type="text" class="form-control" id="fb-updateDefaultValue">
</div>

这是我的 jQuery：

var currentDefaultValue = formElement.find('input').attr('value');
alert(currentDefaultValue); //This is just used to verify my code is working. This line does successfully alert the value in the input attribute
$("#fb-updateDefaultValue").val(currentDefaultValue); //This line is not updating the value attribute of the input even though the alert has the correct value

由于某种原因，$("#fb-updateDefaultValue").val(currentDefaultValue); 无法正常工作。有什么建议吗？

【问题讨论】：

您设置的值相同！
Val 用于输入。标签不是输入。请改用text。
@Gosha_Fighten 我不是要更新标签，而是要更新输入。
您的代码“不工作”的原因是什么？我们不清楚您预计会发生什么。
Your code works fine for me。您需要向我们展示如何重现该问题。

标签： javascript jquery html jquery-selectors

【解决方案1】：

你可以试试这个，每次你在 input1 上输入这个代码，你都会在 input2 上得到相同的值

<label for "input1">Value 1</label>
<input type="text" id="input1" />
<br />  


<label for "input2">Value 2</label>
<input type="text" id="input2" />
<br />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
</script>

<script type="text/javascript">
   $(function() {
     $("#input1").change(function() {
       var input1 = $("#input1").val();
     $("#input2").val(input1);
   });
});
</script>

【讨论】：

【解决方案2】：

如果我理解正确的话，你正在尝试做这样的事情......

我认为部分问题在于您没有附加事件处理程序。在下面的示例中，我将函数附加到按钮单击。

$("#button").click(function (){
  $("#input2").val($("#input1").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label for "input1">Value 1</label>
<input type="text" id="input1" /><br />

<label for "input2">Value 2</label>
<input type="text" id="input2" /><br />

<input type="button" id="button" value="Update" />

在此示例中，与第一个示例类似，我将展示如何在第一个输入的值发生更改时自动更新值。

$("#input1").change(function (){
      $("#input2").val($("#input1").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label for "input1">Value 1</label>
<input type="text" id="input1" /><br />

<label for "input2">Value 2</label>
<input type="text" id="input2" /><br />

这些只是两个基本示例，但根据您的 cmets，我认为问题可能是您没有分配事件处理程序。

如果您只希望代码运行一次，则另一种选择是。在这种情况下，您需要在加载 DOM 后运行代码。你可以通过使用 jQuery 的 ready() 函数来做到这一点

$(document).ready(function (){
  $("#input2").val($("#input1").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label for "input1">Value 1</label>
<input type="text" id="input1" value="defaultValue" /><br />

<label for "input2">Value 2</label>
<input type="text" id="input2" /><br />

【讨论】：

【解决方案3】：

使用val() 获取输入值，使用text() 设置文本。所以这适用于你的情况：

$(".form-group label").text($(".form-group input").val())

【讨论】：