使用jQuery UI選項卡和jQuery UI selectmenu
[英]Using jQuery UI tabs and jQuery UI selectmenu
問題描述
我有兩個選項卡，每個選項卡中我都想要一些表格。 我還要在每個選項卡的jQuery UI中添加selectmenu。 問題在於第二個選項卡上的選擇菜單不會顯示。 我相信這與標簽的加載方式有關，但我不確定如何解決。
這是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>
非常感謝
2 個解決方案
解決方案1
0 已采納 2015-01-26 22:35:38
看來您可以通過檢查每個下拉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();
});
此代碼似乎有效。
解決方案2
0 2015-01-28 21:06:01
因此，我遵循了@dcook的建議，並查看了文檔，並決定以特定的寬度初始化selectmenu() 。 使用Chrome的工具，我能夠驗證是否應用了第二個選項卡上的selectmenu() ，但寬度設置為0，這很奇怪，因為應該根據選擇中最大字符串的長度自動設置寬度。
干杯。
jquery ui 選擇菜單自動填充
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.