如何在使用onchange时将JavaScript函数结果传递给html

How to pass JavaScript function result to html when using onchange?

本文关键字：结果 函数 html JavaScript 时将 onchange      更新时间：2023-09-26

我想知道如何将用户选择的选项作为文本放在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);
}

您可以使用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中创建元素的方法，在现有元素的周围，内部和外部。

您可以创建新的div并将其放置在您想要的位置。只要把这个作为div的html或append添加到它，做任何你喜欢的。

function myFunction() {
    var user_selection = $( "#profile option:selected" ).text();
    $('#somediv').html(user_selection);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="profile" onchange="myFunction()">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>                              
</select>
<br/>
<div id = 'somediv'> </div>

相关文章：