Question

我正在使用Jquery 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。怎么会这样？

EDITED

这是简单的小提琴演示：

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

选中此fiddle

这将选择可见的下拉列表并忽略隐藏的下拉列表。

Answer 3

当前代码逻辑：

您的$('select[name="select_box"]')确实会返回名称为select_box的所有下拉列表
但表达式$('select[name="select_box"]').val()只会返回第一个下拉列表的值
您需要解决的问题：始终从有效标签

另一个解决方案（除了@A J提供的解决方案之外：

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

请参阅this更新的小提琴并继续阅读有关jQuery.val() here的更多信息。正如所说：

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

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

3 个答案: