[英]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。 怎么會這樣?
已編輯
這是簡單的小提琴演示:
嘗試使用:
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.