[英]Issue with JQuery UI tabs while clicking the button
I am using Jquery UI tabs. 我正在使用Jquery UI选项卡。 I will try explain you my problem, so here is my jquery codes for UI ajax Tabs. 我将尝试向您解释我的问题,所以这是我的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.");
});
}
});
});
At the page index.php you can see HTML codes for UI tabs. 在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>
So, as you see my ajax tabs load the page sections.php. 因此,如您所见,我的Ajax标签会加载页面sections.php。 On sections.php I have a select box and I get couple options, depending on status_id. 在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>
Using jquery script at below I am able to alert the selected value of select_box
. 使用下面的jquery脚本,我可以提醒select_box
的选定值。
<script>
$('button[name="button1"]').click(
function () {
var value = $('select[name="select_box"]').val();
alert(value);
return false;
}
);
</script>
My question: 我的问题:
For example, I select second tab ( sections.php?id=3
) and click the button, dialog displays the number 4, that is right. 例如,我选择第二个选项卡( sections.php?id=3
),然后单击按钮,对话框显示数字4,即是。 Then I select next option, dialog displays the number 5, that is right too. 然后,我选择下一个选项,对话框将显示数字5,这也是正确的。 Now, I am clicking the next tab, for example ( sections.php?id=6
) and click the button again. 现在,我单击下一个选项卡,例如( sections.php?id=6
),然后再次单击按钮。 Now dialog should display me the number 7, but displays previous number:5. 现在对话框应该显示数字7,但显示以前的数字:5。 How can this be? 怎么会这样?
EDITED 已编辑
Here is simple Fiddle Demo: 这是简单的小提琴演示:
Try using: 尝试使用:
var value = $('select[name="select_box"]:visible').val();
Or 要么
var value = $(this).parents('#tabs').find('select:visible:first').val();
instead of 代替
var value = $('select[name="select_box"]').val();
The current code shows tha value of first dropdown. 当前代码显示第一个下拉列表的值。 Modify the click even as following; 甚至如下修改单击;
$('button[name="button1"]').click(
function () {
var value = $('select[name="select_box"]:visible').val();
alert(value);
return false;
}
);
This will select the dropdown which is visible and ignore the dropdowns that are hidden. 这将选择可见的下拉菜单,并忽略隐藏的下拉菜单。
Current code logic: 当前代码逻辑:
your $('select[name="select_box"]')
will indeed return a list of all dropdowns with a name of select_box
您的$('select[name="select_box"]')
确实会返回所有下拉列表的列表,其名称为select_box
but the expression $('select[name="select_box"]').val()
will just return the value of the first dropdown 但是表达式$('select[name="select_box"]').val()
只会返回第一个下拉列表的值
thing you need to fix : always get the selected value from the dropdown which lays down within the active tab 您需要解决的问题 :始终从活动选项卡中的下拉列表中获取选定的值
One other solution (beside the one provided by @AJ would be: 另一种解决方案(除了@AJ提供的解决方案是:
// Reference only the select dropdown within an active tab
var value = $('div[aria-expanded="true"] select[name="select_box"]').val();
See this updated fiddle and continue reading more about jQuery.val()
here . 请参阅此更新的小提琴,并在此处继续阅读有关jQuery.val()
更多信息。 As it's said: 据说:
Get the current value of the first element in the set of matched elements or set the value of every matched element. 获取匹配元素集中第一个元素的当前值,或设置每个匹配元素的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.