How to update select options before showing them i

Look at this example code:

<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>

My problem here is that the click event show the select box and only after it updates it with the new value ("pera"). What I need to do is first update the select with the new value and only after show it. Is there anyway to do that using jQuery? Thanks in advance, guys!

EDIT:

Ok, let me try to explain a little bit clear: Whenever you click in a select to show the options it show it automatically (it's obvious!). My problem is that I need to intercept the click event, update the select and only after it show the select. But it's showing the select (it's the default behaviour) before updating. Here is what happening:

1) Select with initial values: banana, laranja

2) User click it. What I want: Show banana, laranja and pera as options. What happens: It shows banana, laranja in the list, show it and only after update the select (If I inspect the html code with fiebug, the pera option is there!). If I click again inthe select, the pera options appears normally and as the code above says, it appends another pera option in the select that only appears in the next click and so on.

标签： javascript jquery select click updates

3条回答

爷、活的狠高调

2楼-- · 2019-09-06 13:20

i think you want to prevent showing multiple times the teste option.

<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>

0人赞添加讨论(0) 举报

神经病院院长

3楼-- · 2019-09-06 13:36

I think this might be what you are searching for:

Using the value:

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

To reset it use:

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

Using the text:

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

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

0人赞添加讨论(0) 举报

你好瞎i

4楼-- · 2019-09-06 13:45

I'm a little bit confused.. do you just want to update the select when the page loads? If so you can do:

CSS:

#teste {
  display: none;
}

JS:

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

0人赞添加讨论(0) 举报

How to update select options before showing them i

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间