JSFiddle - React, Tailwind, and code Playground

by riyadh

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<form>
    <select id='mySelect'>
        <option value='0'>Home</option>
        <option value='1'>Profile</option>
        <option value='2'>Messages</option>
        <option value='3'>Settings</option>
    </select>
</form>
<ul class="nav nav-tabs" id="myTab" style="display:none">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Home content</div>
    <div class="tab-pane" id="profile">Profile content</div>
    <div class="tab-pane" id="messages">Messages content</div>
    <div class="tab-pane" id="settings">Settings content</div>
</div>

JavaScript

$('#mySelect').on('change', function (e) {
    $('#myTab li a').eq($(this).val()).tab('show'); 
});