使用 jQuery 获取选择的选项文本时遇到问题答案

【问题标题】：Trouble using jQuery to get the option text for a select使用 jQuery 获取选择的选项文本时遇到问题
【发布时间】：2012-07-31 11:56:54
【问题描述】：

我想做的是复制我以前在某处看到的表单交互体验......

当您点击“文本”时，它会变成一个文本字段供用户编辑文本。

标签：文本（点击）标签：输入[文本]。然后 blah.change(){ 提交 };

$('#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() 但没有用。

【问题讨论】：

标签： jquery html forms

【解决方案1】：

附言。我试过 $(this+" option:selected").text() 但没有用

this 是一个对象而不是字符串。试试

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

我也不知道模糊事件是否以及何时在不同的浏览器中被触发，但我想这是不一致的。

我个人会使用单独的“确认”和“取消”按钮，以便用户决定何时保存或不保存。

【讨论】：

谢谢！ :) 我会看看 .blur()

【解决方案2】：

试试这个 - http://jsfiddle.net/tQxmN/1/

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：