使用jquery到文本字段獲取第一個html下拉值

Question

使用我當前的代碼，我可以使用jquery輕松更改下拉列表中的html下拉值，但是我沒有獲得在下拉列表中選擇的默認值。

這是我嘗試的jQuery

$("document").ready(function () {
    $("#dropval").change(function () {
        var selectedValue = $(this).val();
        $("#data").val($(this).find("option:selected").attr("value"));
        alert($("#dropval option:selected").text());
    });
});

我嘗試了下面的代碼alert($("#dropval option:selected").text()); 我沒有收到警報js小提琴鏈接

有時簡單的東西也無法正常工作:)

Answer 1

這將帶載值：

<select name="drop" id="dropval">
    <option selected value="first">First</option>
    <option value="second">second</option>
</select>
<input type="text" id="data" />

$("document").ready(function () {
    $("#dropval").change(function () {
        var selectedValue = $(this).val();
        $("#data").val($("#dropval").find("option:selected").attr("value"));
        alert($("#dropval option:selected").text());
    });
    console.log($(this));
    $("#data").val($("#dropval").find("option:selected").attr("value"));
});

選項2

的jsfiddle

$("document").ready(function () {   
    $("#dropval").change(function () {
        var selectedValue = $(this).val();
        $("#data").val(selectedValue);
        alert($("#dropval option:selected").text());
    });
    $("#data").val($("#dropval").val());
});

Answer 2

看一下這種可能性-通過使用focus事件獲取上一個選定選項的值：

$("document").ready(function () {
    $("#dropval")
        .focus(function(){
            $("#data").val($(this).find("option:selected").attr("value"));
        })
        .change(function () {
        var selectedValue = $(this).val();
        //alert($("#dropval option:selected").text());
    });
});

更新的提琴： http : //jsfiddle.net/5bjrtfzc/4/