在另一個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();

    });
});

另一個演示

用TEXTFIELD VALUE3更新Fiddle DEMO

采用

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

Answer 2

如果您使用的是jQuery，請嘗試以下代碼。

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

演示版

Answer 3

嘗試這個：

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

在這里演示