如何使用jQuery设置输入文本的值

本文翻译自：How to set value of input text using jQuery

I have an input text which is this: 我有一个输入文本是这样的：

<div class="editor-label">
    @Html.LabelFor(model => model.EmployeeId, "Employee Number")
</div>

<div class="editor-field textBoxEmployeeNumber">
    @Html.EditorFor(model => model.EmployeeId) 
    @Html.ValidationMessageFor(model => model.EmployeeId)
</div>

Which produce following html 哪些产生以下HTML

 <div class="editor-label"> <label for="EmployeeId">Employee Number</label> </div> <div class="editor-field textBoxEmployeeNumber"> <input class="text-box single-line" data-val="true" data-val-number="The field EmployeeId must be a number." data-val-required="The EmployeeId field is required." id="EmployeeId" name="EmployeeId" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="EmployeeId" data-valmsg-replace="true"></span> </div> 

I want to set the value of this input text using jquery so i did this: 我想使用jquery设置此输入文​​本的值，所以我做到了：

<script type="text/javascript" language="javascript">
    $(function() {
        $('.textBoxEmployeeNumber').val("fgg");
    });
</script> 

however, it is not working... what is the error in my syntax? 但是，它不起作用...我的语法有什么错误？

---

#1楼

参考：https://stackoom.com/question/iWRu/如何使用jQuery设置输入文本的值

---

#2楼

Your selector is retrieving the text box's surrounding <div class='textBoxEmployeeNumber'> instead of the input inside it. 您的选择器正在检索文本框周围的<div class='textBoxEmployeeNumber'>而不是其中的输入。

// Access the input inside the div with this selector:
$(function () {
  $('.textBoxEmployeeNumber input').val("fgg");
});

Update after seeing output HTML 看到输出HTML后更新

If the ASP.NET code reliably outputs the HTML <input> with an id attribute id='EmployeeId' , you can more simply just use: 如果ASP.NET代码可靠地输出具有id属性id='EmployeeId'的HTML <input> ，则可以更简单地使用：

$(function () {
  $('#EmployeeId').val("fgg");
});

Failing this, you will need to verify in your browser's error console that you don't have other script errors causing this to fail. 如果失败，则需要在浏览器的错误控制台中确认没有其他脚本错误导致此操作失败。 The first example above works correctly in this demonstration. 上面的第一个示例在此演示中正常工作。

---

#3楼

$(document).ready(function () {
    $('#EmployeeId').val("fgg");

    //Or
    $('.textBoxEmployeeNumber > input').val("fgg");

    //Or
    $('.textBoxEmployeeNumber').find('input').val("fgg");
});

---

#4楼

Using jQuery, we can use the following code: 使用jQuery，我们可以使用以下代码：

Select by input name: 通过输入名称选择：

$('input[name="textboxname"]').val('some value')

Select by input class: 按输入类别选择：

$('input[type=text].textboxclass').val('some value')

Select by input id: 通过输入ID选择：

$('#textboxid').val('some value')

---

#5楼

For element with id 对于ID为的元素

<input id="id_input_text16" type="text" placeholder="Ender Data"></input>

You can set the value as 您可以将值设置为

$("#id_input_text16").val("testValue");

Documentation here . 文档在这里 。

---

#6楼

Here is another variation for a file upload that has a nicer looking bootstrap button than the default file upload browse button. 这是文件上传的另一个变体，它的引导按钮比默认的文件上传浏览按钮好看。 This is the html: 这是html：

<div class="form-group">
        @Html.LabelFor(model => model.FileName, htmlAttributes: new { @class = "col-md-2  control-label" })
        <div class="col-md-1 btn btn-sn btn-primary" id="browseButton" onclick="$(this).parent().find('input[type=file]').click();">browse</div>
        <div class="col-md-7">
            <input id="fileSpace" name="uploaded_file"  type="file" style="display: none;">   @*style="display: none;"*@
            @Html.EditorFor(model => model.FileName, new { htmlAttributes = new { @class = "form-control", @id = "modelField"} })
            @Html.ValidationMessageFor(model => model.FileName, "", new { @class = "text-danger" })
        </div>
    </div>

Here is the script: 这是脚本：

        $('#fileSpace').on("change", function () {
        $("#modelField").val($('input[name="uploaded_file"]').val());