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现有元素中创建元素的方法。

Answer 2

您可以创建新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>

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

2 个答案: