问题与点击按钮时，JQuery UI选项卡

我正在使用Jquery UI选项卡。我会尝试向你解释我的问题，所以这里是我的UI Ajax Tabs的jQuery代码。问题与点击按钮时，JQuery UI选项卡

$(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页面，您可以看到UI标签的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>

所以，你看到我的ajax标签加载页面sections.php。在sections.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>

低于我能够提醒的select_box选择的值使用jQuery脚本。

<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

下面是简单的小提琴演示：

http://jsfiddle.net/cLHBS/

来源

2014-06-20 Rashad

你能举一个小提琴吗？ – Yaje

当然。这里是一个小提琴： http://jsfiddle.net/cLHBS/ – Rashad

当前代码显示第一下拉的THA值。修改点击甚至如下;

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

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

     return false; 
    } 
);

入住这fiddle

这将选择下拉是可见的，忽略了隐藏在下拉菜单。

来源

2014-06-20 06:49:58

尝试使用：

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();

来源

2014-06-20 06:47:35

当前代码逻辑：

您$('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。正如所说：

获取匹配元素集合中第一个元素的当前值或设置每个匹配元素的值。

来源

2014-06-20 07:05:10

它也有帮助。谢谢你的解释。 – Rashad

;）很高兴帮助！ –

问题与点击按钮时，JQuery UI选项卡

回答

相关问题