簡體   English   中英

單擊按鈕時JQuery UI選項卡出現問題

[英]Issue with JQuery UI tabs while clicking the button

我正在使用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/

嘗試使用:

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

當前代碼顯示第一個下拉列表的值。 甚至如下修改單擊;

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

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

        return false;
    }
);

檢查這個小提琴

這將選擇可見的下拉菜單,並忽略隱藏的下拉菜單。

當前代碼邏輯:

  • 您的$('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()更多信息。 據說:

獲取匹配元素集中第一個元素的當前值,或設置每個匹配元素的值。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM