我目前正在使用 Jquery UI 选项卡,我只能使用下一个/上一个按钮进行操作(这将迫使用户按顺序浏览选项卡)。在我的第一个选项卡中,我有一组动态选择框,我试图让用户在启用“下一步”按钮之前从对应的类别及其子类别中选择一个类别及其子类别。但下一个按钮根本没有被禁用。
如何让用户从所有相应的选择框中进行选择,然后启用“下一步”按钮?EXAMPLE http://webprolearner.ueuo.com/dropdown-menu/test1.php
I added $('.update').change(function()
到 JS 中的 NEXT/PREVIOUS 来检测最后一个选择框中的所选项目并按下 NEXT 按钮
JS 表示下一个/上一个
<script>
$(function() {
var $tabs = $('#tabs').tabs({
disabled: [0, 1]
});
$(".ui-tabs-panel").each(function(i) {
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.update').change(function() {
$('#tabs').tabs(
'option',
'disabled',
(
$(this).hasClass('last') &&
parseInt($(this).val(), 10) > 0 ?
[] :
[1]
)
);
});
$('.next-tab, .prev-tab').click(function() {
var tabIndex = $(this).attr("rel");
$tabs.tabs('enable', tabIndex)
.tabs('select', tabIndex)
.tabs("option","disabled", [0, 1]);
return false;
});
});
</script>
更新SelectBox.js
// following line is added to detect last select box picked
$('.update').removeClass('last');
if (!data.error) {
obj.next('.update').html(data.list).removeAttr('disabled hidden');
} else {
// following line is changed
obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
}
选择框的 HTML
<select name="gender" id="gender" class="update" size="7">
<option value="">Select one</option>
<?php if (!empty($list)) { ?>
<?php foreach($list as $row) { ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['category_name']; ?>
</option>
<?php } ?>
<?php } ?>
</select>
<select name="category" id="category" class="update" disabled="disabled" hidden="hidden" size="7">
<option value="">----</option>
</select>
<select name="colour" id="colour" class="update" disabled="disabled" hidden="hidden" size="7">
<option value="">----</option>
</select>