Using jQuery UI tabs and 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. 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/
<!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
2 answers
solution1
0 ACCPTED 2015-01-26 22:35:38
It seems that you could fix this problem by checking where your id name is for each drop-down div.
Your first div has the id="tabs-2" where it should be id="tabs-1". Your second div has the id="tabs-1" where it should be id="tabs-2".
This way your links will now link to the correct 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. Therefore, the jQuery for the .selectmenu is not needed, as well as the class name.
<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.
solution2
0 2015-01-28 21:06:01
So I followed @dcook advise and I looked into the documentation and decided to initialize selectmenu() with a particular width. 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.
Cheers.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.