使用jQuery UI选项卡和jQuery UI selectmenu

Question

I have two tabs and inside each of them I want to have some forms. 我有两个选项卡，每个选项卡中我都想要一些表格。 I'm adding selectmenu, as well from jQuery UI inside each tab. 我还要在每个选项卡的jQuery UI中添加selectmenu。 The problem is that the select menu on the second tab won't show. 问题在于第二个选项卡上的选择菜单不会显示。 I believe this has someting to do with how the tabs are loaded but I'm not quite sure how to solve it. 我相信这与标签的加载方式有关，但我不确定如何解决。

Here's the html code and a fiddle http://jsfiddle.net/us8xbyyo/ 这是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>

Thanks a lot 非常感谢

Answer 1

It seems that you could fix this problem by checking where your id name is for each drop-down div. 看来您可以通过检查每个下拉div的ID名称在哪里来解决此问题。

Your first div has the id="tabs-2" where it should be id="tabs-1". 您的第一个div具有id =“ tabs-2”，其中应为id =“ tabs-1”。 Your second div has the id="tabs-1" where it should be id="tabs-2". 您的第二个div具有id =“ tabs-1”，应为id =“ tabs-2”。

This way your links will now link to the correct div. 这样，您的链接现在将链接到正确的div。

Secondly, I believe since you have the tags already there in the HTML, it will automatically render as a dropdown with your options labeled in correspondence with whats between the tabs. 其次，我相信，既然HTML中已经有标签，它将自动显示为下拉列表，其中选项的标签与选项卡之间的内容相对应。 Therefore, the jQuery for the .selectmenu is not needed, as well as the class name. 因此，不需要.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();
});

This code seems to work. 此代码似乎有效。

Answer 2

So I followed @dcook advise and I looked into the documentation and decided to initialize selectmenu() with a particular width. 因此，我遵循了@dcook的建议，并查看了文档，并决定以特定的宽度初始化selectmenu() 。 Using Chrome's tools I was able to verify that the selectmenu() on the second tab was applied but the width was set to 0, wich is odd since the width should be automatically set depending on the length of the largest string inside the select. 使用Chrome的工具，我能够验证是否应用了第二个选项卡上的selectmenu() ，但宽度设置为0，这很奇怪，因为应该根据选择中最大字符串的长度自动设置宽度。

Cheers. 干杯。

使用jQuery UI选项卡和jQuery UI selectmenu

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-01-26 22:35:38

解决方案2
0 2015-01-28 21:06:01

使用jQuery UI选项卡和jQuery UI selectmenu

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-01-26 22:35:38

解决方案2 0 2015-01-28 21:06:01

解决方案1
0 已采纳 2015-01-26 22:35:38

解决方案2
0 2015-01-28 21:06:01