javascript - 在另一个 DIV 元素中显示选定的值

Question

我要求用户选择他/她的性别。稍后我想在另一个<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>

Answer 1

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

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

演示

Answer 2

尝试这个：

$(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);
    });
});

演示在这里

Answer 3

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

    });
});

另一个演示

使用 TEXTFIELD VALUE3 更新 Fiddle DEMO

利用

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