0

我有两个选项卡，在每个选项卡中我都想要一些表格。我正在添加选择菜单，以及每个选项卡内的 jQuery UI。问题是第二个选项卡上的选择菜单不会显示。我相信这与标签的加载方式有关，但我不太确定如何解决它。

这是 html 代码和小提琴http://jsfiddle.net/us8xbyyo/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI tabs</title>
<link rel="stylesheet" href="./jQuery/jquery-ui.css">
<script src="./jQuery/external/jquery/jquery.js"></script>
<script src="./jQuery/jquery-ui.js"></script>
<script>
$(function() {
    $( "#tabs" ).tabs();
    $( ".mySelect" ).selectmenu();
});
</script>
</head>
<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Company</a></li>
        <li><a href="#tabs-2">Depto</a></li>
    </ul>
    <div id="tabs-2">
        <label for="company">Company </label>
        <select class="mySelect" id ="company">
            <option value="-1">Chose a company</option>
            <option value="1">Company 1</option>
            <option value="2">Company 2</option>
            <option value="3">Company 3</option>
        </select>   
    </div>
    <div id="tabs-1">
        <label for="depto">Depto</label>
        <select class="mySelect" id="depto" name="depto">
            <option value="-1">Chose a dpto</option>
            <option value="1">Dpto 1 </option>
            <option value="2">Dpto 2</option>
            <option value="3">Dpto 3</option>
        </select>   
    </div>
</div>
</body>
</html>

非常感谢

4

2 回答 2

0

所以我遵循@dcook 的建议并查看了文档并决定selectmenu()使用特定的宽度进行初始化。使用 Chrome 的工具，我能够验证是否selectmenu()应用了第二个选项卡上的 ，但宽度设置为 0，这很奇怪，因为应根据选择中最大字符串的长度自动设置宽度。

干杯。

于 2015-01-28T21:06:01.953 回答
0

您似乎可以通过检查每个下拉 div 的 id 名称的位置来解决此问题。

您的第一个 div 的 id="tabs-2" 应该是 id="tabs-1"。您的第二个 div 的 id="tabs-1" 应该是 id="tabs-2"。

这样，您的链接现在将链接到正确的 div。

其次，我相信由于您在 HTML 中已经有了标签，它会自动呈现为下拉列表，您的选项标签与选项卡之间的内容相对应。因此，不需要 .selectmenu 的 jQuery 以及类名。

<body>
<div id="tabs">
<ul>
    <li><a href="#tabs-1">Company</a></li>
    <li><a href="#tabs-2">Depto</a></li>
</ul>
<div id="tabs-1">
    <label for="company">Company </label>
    <select id="company">
        <option value="-1">Chose a company</option>
        <option value="1">Company 1</option>
        <option value="2">Company 2</option>
        <option value="3">Company 3</option>
    </select>   
</div>
<div id="tabs-2">
    <label for="depto">Depto</label>
    <select id="depto">
        <option value="-1">Chose a depto</option>
        <option value="1">Dpto 1 </option>
        <option value="2">Dpto 2</option>
        <option value="3">Dpto 3</option>
    </select>   
</div>


$(function() {
$( "#tabs" ).tabs();
});

这段代码似乎有效。

于 2015-01-26T22:35:38.660 回答