如何在Jquery中显示选择选项之前更新这些选项

How to update select options before showing them in Jquery?

本文关键字：选项 更新 选择 Jquery 显示      更新时间：2023-09-26

看看这个示例代码：

<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"）更新它之后。我需要做的是首先用新的值更新select，并且只有在显示它之后。有没有使用jQuery这样做的方法？提前谢谢，伙计们！

编辑：

好吧，让我试着解释清楚一点：每当你点击一个选择来显示选项时，它就会自动显示出来（这很明显！）。我的问题是，我需要拦截点击事件，更新select，并且只有在它显示select之后。但它在更新之前会显示select（这是默认行为）。情况如下：

1） 用初始值选择：香蕉，拉兰加

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

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

CSS：

#teste {
  display: none;
}

JS:

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

我想这可能就是您正在搜索的：

使用值：

$('[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

我认为您希望避免多次显示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>
相关文章：