故障使用jQuery以獲取選項文本選擇

Question

我所試圖做的是複製我以前在什麼地方見過一種形式的互動體驗......

當你點擊「文本」就變成了文本字段供用戶編輯文本。

label：text（click）label：input [text]。然後blah.change（）{submit};

$('#basicinfo div').click(function(){ 
    $('#basicinfo select').hide(); 
    $('#basicinfo div').show(); 
    $(this).hide(); 
    $(this).siblings('select').show(); 
}); 
$('#basicinfo select').blur(function(){ 
    $('#basicinfo select').hide(); 
    $('#basicinfo div').show(); 
}); 
$('#basicinfo select').change(function(){ 
    $(this).siblings('div').html(***$(this).text()***); 
    $('#basicinfo').submit(); 
}); 

<form id="basicinfo"> 
    <label>Gender</label> <div>Male</div> 
    <select name="1"> 
     <option value="1">Male</option> 
     <option value="2">Female</option> 
    </select> 
    <label>Age</label> <div>23years</div> 
    <select name="2"> 
     <option value="21">21 years</option> 
     <option value="22">22 years</option> 
     <option value="23">23 years</option> 
    </select> 
</form> 

使用.VAL（）或的.text（）都沒有奏效，希望有人會知道我需要什麼:)

PS。我嘗試了$（this +「option：selected」）。text（）但沒有工作。

Answer 1

PS。我嘗試了$（this +「option：selected」）。text（）但沒有工作

this是一個對象而不是字符串。嘗試

$(this).find('option:selected').text() 

此外，我不知道是否以及何時在不同的瀏覽器觸發模糊事件，但我想它是不一致的。

我個人會使用單獨的「確認」和「取消」按鈕，以便用戶可以決定何時保存或不保存。

Answer 2

試試這個 - http://jsfiddle.net/tQxmN/1/

$('#basicinfo select').on("change", function(){ 
    alert($(this).find("option:selected").text()); 
});​ 

Answer 3

$('#basicinfo select').change(function() 
{ 
    var optionValue = $(this).find("option:selected").text(); 

    $(this).siblings('div').html(optionValue); 

    $('#basicinfo').submit(); 
});