jquery - ajax 实时更新 div 元素中的文本

Question

我正在尝试使用 ajax 更新 DIV 元素的内容。我让它与 INPUT 字段一起使用，但 DIV 元素不会更改值。

这是我的 html:

    <form>
    <select name="hdd" id="hdd" class="select-field">
        <option value="C" default="default">C</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
    </select>
</form>

    <div id="files">test</div>

这是我的 ajax:

    jQuery(document).ready(function () {
    var $files = $(this).attr("div#files");

    $("#hdd").keyup(function () {
        $files.val(this.value);
    });

    $("#hdd").blur(function () {
        $files.val(this.value);
    });

});

我认为问题在于这一行: var $files = $(this).attr("div#files"); ?

JSFiddle link to my test script

Answer 1

假设，您要定位的目标是 #files DOM 中的对象，您可以更改它:

var $files = $(this).attr("div#files");

对此:

var $files = $("#files");

并且，一个div没有 .val()方法。使用.html()像这样:

jQuery(document).ready(function () {

    $("#hdd").on("keyup blur change", function () {
        $("#files").html(this.value);
    });

});

注意:如何使用.on()您可以一次指定多个事件，这些事件将全部调用相同的事件处理程序，从而无需复制代码。

<小时/>

或者，也许您需要的只是 "change"每当用户为 <select> 提交新值时就会触发该事件控制:

jQuery(document).ready(function () {

    $("#hdd").on("change", function () {
        $("#files").html(this.value);
    });

});