故障使用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(); 
});