0

2 つのタブがあり、それぞれの中にいくつかのフォームが必要です。各タブ内のjQuery UIからもselectmenuを追加しています。問題は、2 番目のタブの選択メニューが表示されないことです。これはタブのロード方法に関係していると思いますが、解決方法がよくわかりません。

ここに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 のツールを使用して、2 番目のタブが適用されていることを確認できましたselectmenu()が、幅が 0 に設定されていました。選択内の最大の文字列の長さに応じて幅が自動的に設定されるため、これは奇妙です。

乾杯。

于 2015-01-28T21:06:01.953 に答える
0

各ドロップダウン div の ID 名がどこにあるかを確認することで、この問題を解決できるようです。

最初の div には id="tabs-2" があり、id="tabs-1" である必要があります。2 番目の 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 に答える