javascript - 使用 onchange 时如何将 JavaScript 函数结果传递到 html？

Question

我想知道如何将用户选择的选项作为文本放置在 HTML 中的某个位置。我使用 JavaScript 获取用户选择，但我不知道如何将其传递回 HTML。

我当前的代码如下所示。HTML:

<select id="profile" onchange="myFunction()">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>                              
</select>

Javascript:

function myFunction() {
    var user_selection = $( "#profile option:selected" ).text();
    alert(user_selection);
}

Answer 1

您可以使用 jQuery 创建一个新元素并将其添加到 DOM，如下所示:

function myFunction() {
    var user_selection = $("#profile option:selected").text();
    $('<div>' + user_selection + '</div>').insertAfter('#profile');
}

另请注意，使用 on* 事件属性已被视为过时。您应该使用不显眼的事件处理程序。由于您已经在使用 jQuery，因此操作方法如下:

$('#profile').change(function() {
    var user_selection = $(this).find('option:selected').text();
    $('<div>' + user_selection + '</div>').insertAfter(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="profile">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>                              
</select>

我建议您熟悉 jQuery 在 DOM 中创建元素的方法 around , inside和 outside现有元素。