Как обновить выбранные опции перед их отображением в Jquery?

0

Посмотрите на этот пример кода:

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

Моя проблема заключается в том, что событие click показывает окно выбора и только после его обновления с новым значением ("pera"). Что мне нужно сделать, так это сначала обновить выбор с новым значением и только после его показа. Есть ли способ сделать это с помощью jQuery? Спасибо заранее, ребята!

РЕДАКТИРОВАТЬ:

Хорошо, позвольте мне попытаться объяснить немного ясно: всякий раз, когда вы нажимаете кнопку выбора, чтобы показывать параметры, это автоматически показывает (это очевидно!). Моя проблема в том, что мне нужно перехватить событие click, обновить select и только после того, как он отобразит select. Но он покажет выбор (это поведение по умолчанию) перед обновлением. Вот что происходит:

1) Выбрать с начальными значениями: банан, ларанья

2) Пользователь щелкнул по нему. Что я хочу: Показывать бананы, лараньи и перы как варианты. Что происходит: он отображает бананы, laranja в списке, показывает его и только после обновления выбирает (если я проверяю html-код с помощью fiebug, опция pera есть!). Если я снова нажимаю на выбор, параметры pera отображаются нормально, и, как говорится в вышеприведенном коде, он добавляет еще один параметр pera в select, который появляется только в следующем клике и так далее.

  • 0
    Разве вы не хотите, чтобы выбор был виден с самого начала?
  • 0
    «Моя проблема здесь в том, что событие click показывает поле выбора и только после того, как оно обновляет его новым значением» Это не то, что делает ваш код
Показать ещё 1 комментарий
Теги:
select
click
updates

3 ответа

2

Я немного смущен. Вы просто хотите обновить выбор при загрузке страницы? Если это так, вы можете сделать:

CSS:

#teste {
  display: none;
}

JS:

$(function(){
  $('#teste').append('<option id="pera">pera</option>').val("pera").show();
});
Поделиться
  • 0
    Посмотрите на отредактированный вопрос, пожалуйста!
  • 0
    Я только что обновил свой ответ. Это добавляет option , выбирая ее, затем показывая ее.
Показать ещё 2 комментария
0

Я думаю, это может быть то, что вы ищете:

Используя значение:

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

Поделиться
  • 0
    Посмотрите на отредактированный вопрос, пожалуйста!
0

я думаю, вы хотите предотвратить показ нескольких вариантов 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>
Поделиться
  • 0
    Посмотрите на отредактированный вопрос, пожалуйста!
  • 0
    Нет, это не то, что я пытаюсь сделать. Я пытаюсь сделать следующее: перед тем, как показывать опции выбора пользователю, обновите выбор новым значением и только после того, как он покажет выбор с обновленными параметрами.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню