在另一个 DIV 元素中显示所选值

Display the selected value in another DIV element

本文关键字:显示 另一个 DIV 元素      更新时间:2023-09-26

我要求用户选择他/她的性别。稍后,我想在另一个<div>元素中显示选定的性别,如下所示。我该怎么做?

<div id="v1">
    <table>
        <tr>
            <td>Male or Female</td>
        </tr>
        <tr>
            <td align="left">
                <select id="gender" name="gen">
                    <option>Male</option>
                    <option>Female</option>
                    <option>Do not wish to specify</option>
                </select>
            </td>
        </tr>
    </table>
</div>

现在我需要在另一个<div>中显示所选值:

<div id="v2">
     <h2>I WANT TO DISPLAY THE SELECTED VALUE HERE</h2>
</div>

如果您使用的是 jQuery,请尝试此代码。

$("#gender").change(function() {
    $("#v2 h2").html($(this).val());
});

演示

试试这个:

$(function () {
    $("#selection").on("change", function () {
        var text = $(this).find('option:selected').text();
        $('#v2 h2').text(text);
    });
});

在这里演示

要同时获取值,请执行以下操作:

$(function () {
    $("#selection").on("change", function () {
        var text = $(this).find('option:selected').text();
        var value = $(this).val();
        var string = 'Text: '+text+' - Value: '+value;
        $('#v2 h2').text(string);
    });
});

在这里演示

$(document).ready(function() {
    $('#contact-location').change(function(){
        var location = $(this).val(),
        div = $('#' + location);
var txt=$('#txtfiled11').val();
        div.append(txt);
        $('.hide').hide();
             div.show();
    });
});

另一个演示

使用文本字段值更新小提琴演示3

 $("#dropdown").prop("disabled", false);