Проблема с вкладками пользовательского интерфейса JQuery при нажатии кнопки

Question

Я использую закладки JQuery UI. Я попробую объяснить вам свою проблему, поэтому вот мои коды jquery для UI ajax Tabs.

$(function() { 
$("#tabs").tabs({ 

    beforeLoad: function (event, ui) { 
     if (ui.tab.data("loaded")) { 
      event.preventDefault(); 
      return; 
     } 

     ui.ajaxSettings.cache = true; 
     ui.panel.html(loading), 
     ui.jqXHR.success(function() { 
      ui.tab.data("loaded", true); 
     }), 
     ui.jqXHR.error(function() { 
      ui.panel.html(
      "An error occured while loading a page."); 
     }); 
    } 
}); 
}); 

На странице index.php вы можете увидеть HTML-коды для вкладок пользовательского интерфейса.

index.php

<div id="tabs"> 
<ul> 
    <li><a href="sections.php?id=1"></a></li> 
    <li><a href="sections.php?id=3"></a></li> 
    <li><a href="sections.php?id=6"></a></li> 
    <li><a href="sections.php?id=8"></a></li> 
</ul> 
</div> 

Итак, как вы видите мой Аякс Вкладки загрузить страницу sections.php. На section.php у меня есть поле выбора, и я получаю пару вариантов, в зависимости от status_id.

sections.php

<?php 
$status_id = (int) $_GET['id']; 

$options_array = array(
1 => array(1 => 'option1', 'option2', 'option3'), 
3 => array(4 => 'option4', 'option5', 'option6'), 
6 => array(7 => 'option7', 'option8', 'option9'), 
8 => array(10 => 'option10', 'option11', 'option12)' 
); 
?> 

<select name="select_box"> 

<?php 

    foreach($options_array[$status_id] as $key => $options) 
    { 
     echo '<option value="'.$key.'">'.$options.'</option>'; 
    } 

?> 
</select> 

<button type="submit" name="button1">My Button</button> 

Использование JQuery скрипт в ниже я могу предупредить выбранное значение select_box.

<script> 

    $('button[name="button1"]').click(
     function() { 

      var value = $('select[name="select_box"]').val(); 
      alert(value); 

      return false; 
     } 
    ); 


</script> 

Мой вопрос:

Например, я выбираю второй вкладке (sections.php?id=3) и нажмите на кнопку, диалоговое окно номер 4, что является правильным. Затем я выбираю следующую опцию, в диалоговом окне отображается номер 5, это тоже правильно. Теперь я нажимаю следующую вкладку, например (sections.php?id=6) и снова нажимаю кнопку. Теперь диалог должен отобразить мне номер 7, но отображает предыдущий номер: 5. Как это может быть?

EDITED

Вот простой Fiddle Demo:

http://jsfiddle.net/cLHBS/

Answer 1

текущий код показывает значение тха первого выпадающего списка. Измените клик, как показано ниже;

$('button[name="button1"]').click(
    function() { 

     var value = $('select[name="select_box"]:visible').val(); 
     alert(value); 

     return false; 
    } 
); 

Проверить это fiddle

Это будет выбрать в раскрывающемся списке, который виден и игнорировать выпадающие, которые скрыты.

Answer 2

Попробуйте использовать:

var value = $('select[name="select_box"]:visible').val(); 

Или

var value = $(this).parents('#tabs').find('select:visible:first').val(); 

вместо

var value = $('select[name="select_box"]').val(); 

Answer 3

Текущий код логика:

• ваш $('select[name="select_box"]') действительно возвращает список всех выпадающие с именем select_box

• но выражение $('select[name="select_box"]').val() просто возвращает значение первого выпадающего списка

• вещь, которую вы должны исправить: al способы получить выбранное значение из выпадающего списка, предписывающие на вкладке активного

Еще одно решения (кроме одной обеспечивается @AJ бы:

// Reference only the select dropdown within an active tab 
var value = $('div[aria-expanded="true"] select[name="select_box"]').val(); 

См this обновленной скрипки и Продолжить читать о jQuery.val()here. Как сказано:

Получить текущее значение первого элемента в наборе согласованных элементов или установить значение каждого согласованного элемента.