javascript - Issue with JQuery UI tabs while clicking the button -

javascript - Issue with JQuery UI tabs while clicking the button -

i using jquery ui tabs. seek explain problem, here jquery codes 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 page."); }); } }); });

at page index.php can see html codes ui tabs.

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>

so, see ajax tabs load page sections.php. on sections.php have select box , couple options, depending on 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] $key => $options) { echo '<option value="'.$key.'">'.$options.'</option>'; } ?> </select> <button type="submit" name="button1">my button</button>

using jquery script @ below able alert selected value of select_box.

<script> $('button[name="button1"]').click( function () { var value = $('select[name="select_box"]').val(); alert(value); homecoming false; } ); </script>

my question:

for example, select sec tab (sections.php?id=3) , click button, dialog displays number 4, right. select next option, dialog displays number 5, right too. now, clicking next tab, illustration (sections.php?id=6) , click button again. dialog should display me number 7, displays previous number:5. how can be?

edited

here simple fiddle demo:

http://jsfiddle.net/clhbs/

the current code shows tha value of first dropdown. modify click following;

$('button[name="button1"]').click( function () { var value = $('select[name="select_box"]:visible').val(); alert(value); homecoming false; } );

check fiddle

this select dropdown visible , ignore dropdowns hidden.

javascript jquery ajax jquery-ui jquery-ui-tabs