如何在 Jquery 中显示它们之前更新选择选项？答案

【问题标题】：How to update select options before showing them in Jquery?如何在 Jquery 中显示它们之前更新选择选项？
【发布时间】：2014-01-01 19:16:12
【问题描述】：

看这个示例代码：

<html>
<head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("body").on('click', "#teste",function(){
          $('#teste').append('<option id="pera">pera</option>')
          $('#teste').show();
        });
      });
    </script>
</head> 
<body>
    <select id="teste">
        <option value="banana">banana</option>
        <option value="laranja">laranja</option>
    </select>

</body>

我的问题是点击事件显示选择框，并且只有在它使用新值（“pera”）更新它之后。我需要做的是首先用新值更新选择，然后才显示它。无论如何使用jQuery来做到这一点？提前谢谢各位！

编辑：

好的，让我试着解释清楚一点：每当您单击选择以显示选项时，它会自动显示它（很明显！）。我的问题是我需要拦截点击事件，更新选择并且只有在它显示选择之后。但它在更新之前显示了选择（这是默认行为）。这是发生了什么：

1) 用初始值选择：banana, laranja

2) 用户点击它。我想要什么：显示香蕉、laranja 和 pera 作为选项。会发生什么：它在列表中显示banana，laranja，仅在更新选择后才显示（如果我用fiebug检查html代码，pera选项就在那里！）。如果我在选择中再次单击，则 pera 选项会正常显示，并且如上面的代码所述，它会在选择中附加另一个 pera 选项，该选项仅在下一次单击时出现，依此类推。

【问题讨论】：

你不想从一开始就看到选择吗？
“我的问题是点击事件显示选择框，并且只有在它使用新值更新它之后”这不是你的代码正在做的事情
请看修改后的问题！

标签： javascript jquery select click updates

【解决方案1】：

我有点困惑.. 你只是想在页面加载时更新选择吗？如果是这样，您可以这样做：

CSS：

#teste {
  display: none;
}

JS：

$(function(){
  $('#teste').append('<option id="pera">pera</option>').val("pera").show();
});

【讨论】：

我刚刚更新了我的答案。这是添加一个option，选择它，然后显示它。
您在 DOM 加载后进行更新。这不是我想做的。我希望，当用户单击 SELECT 以查看选项时，更新可用选项，向其中添加“pera”，然后在选择中显示带有“banana”、“laranja”和“pera”的选项.
如果不构建自己的自定义 select 小部件，我认为您不会这样做。这是一个快速演示。如果您在查看链接后立即单击选择，您将看到 3 直到您释放选择后才会显示。（添加新选项会延迟 1 秒）jsbin.com/oPaGOSaJ/1/edit?html,js,output

【解决方案2】：

我认为这可能是您正在寻找的内容：

使用值：

$('[name=options]').val( 3 );//To select Blue

要重置它，请使用：

$('[name=options]').val( '' );

使用文字：

$('[name=options] option').filter(function() { 
    return ($(this).text() == 'Blue'); //To select Blue
}).prop('selected', true);

链接：http://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

【讨论】：

【解决方案3】：

我认为您想防止多次显示 teste 选项。

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#teste{
display: none;
}
</style>
    <script type="text/javascript">
        $(document).ready(function(){
$(document).click(
function(){

if(!$('#teste').is(':visible')){
$('<option/>',{
'id'        : 'pera',
'html'      : 'pera',
'selected'  : 'selected'
}).appendTo('#teste');
$('#teste').show('slow');
}
})
        });


    </script>
</head> 
<body>
    <select id="teste">
        <option value="banana">banana</option>
        <option value="laranja">laranja</option>
    </select>

</body>

【讨论】：

不，这不是我想要做的。我想要完成的是：在向用户显示选择选项之前，使用新值更新选择，并且仅在显示更新选项的选择之后。