在另一个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

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

    });
});

<强> Another Demo

Update Fiddle DEMO with TEXTFIELD VALUE3

使用

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

Answer 2

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

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

Demo

Answer 3

试试这个：

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

演示here

还要获得价值：

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

演示here