使用jQuery UI选项卡和jQuery UI选择菜单_Jquery_Jquery Ui_Jquery Ui Tabs_Jquery Ui Selectmenu

使用jQuery UI选项卡和jQuery UI选择菜单

jquery jquery-ui

使用jQuery UI选项卡和jQuery UI选择菜单,jquery,jquery-ui,jquery-ui-tabs,jquery-ui-selectmenu,Jquery,Jquery Ui,Jquery Ui Tabs,Jquery Ui Selectmenu,我有两个标签，在每个标签里我想要一些表格。我正在添加selectmenu，以及每个选项卡内的jQueryUI。问题是第二个选项卡上的选择菜单不会显示。我相信这与标签的加载方式有关，但我不太确定如何解决这个问题下面是html代码和一把小提琴 jQueryUI选项卡 $（函数（）{ $（“#制表符”）.tabs（）； $（“.mySelect”）.selectmenu（）； }); 单位选择一家公司第一公司公司2 公司3 德普托选择dpto Dpto 1 Dpto 2 Dpto

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

下面是html代码和一把小提琴


jQueryUI选项卡
$（函数（）{
$（“#制表符”）.tabs（）；
$（“.mySelect”）.selectmenu（）；
});




单位
选择一家公司
第一公司
公司2
公司3
德普托
选择dpto
Dpto 1
Dpto 2
Dpto 3

非常感谢

您似乎可以通过检查每个下拉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>

这段代码似乎有效。

因此，我遵循@dcook advice，查阅了文档，决定使用特定的宽度初始化

selectmenu（）

。使用Chrome的工具，我能够验证是否应用了第二个选项卡上的

selectmenu（）

，但宽度设置为0，这是奇数，因为宽度应根据select中最大字符串的长度自动设置

干杯。

谢谢你的回答。我知道

中的顺序被切换，但这不是问题所在，上面的例子只是一个更复杂代码的示例。您刚刚删除了允许显示select的selectmenu，虽然这可以显示select，但它们不是使用jQuery UI呈现的。我相信您可能需要加载jQuery API。只需调用.selectmenu将不会显示任何内容。您需要为该函数传入一些参数和属性，以便它执行任何重要的操作。希望这些信息能让你走上正轨。记住，.selectmenu（{}）；自己什么也不做。

<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();
});