单击按钮时JQuery UI选项卡出现问题

Question

我正在使用Jquery UI选项卡。 我将尝试向您解释我的问题，所以这是我的UI ajax Tabs的jquery代码。

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

使用下面的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。 怎么会这样？

已编辑

这是简单的小提琴演示：

http://jsfiddle.net/cLHBS/

Answer 1

尝试使用：

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 2

当前代码显示第一个下拉列表的值。 甚至如下修改单击；

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

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

        return false;
    }
);

检查这个小提琴

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

Answer 3

当前代码逻辑：

• 您的$('select[name="select_box"]')确实会返回所有下拉列表的列表，其名称为select_box

• 但是表达式$('select[name="select_box"]').val()只会返回第一个下拉列表的值

• 您需要解决的问题 ：始终从活动选项卡中的下拉列表中获取选定的值

另一种解决方案（除了@AJ提供的解决方案是：

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

请参阅此更新的小提琴，并在此处继续阅读有关jQuery.val()更多信息。 据说：

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