Twitter Bootstrap dropdown in table row <td>

like below fixes the issue I see what you're trying to do now, you want to use an input instead of a button with the dropdown group. Looking over the documentation of the bootstrap i found no solution for that setup though you can easily emulate your own by copying the button behavior and just creating your own class to support an input with a dropdown group, like so:
CSS

.btn-group .input:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}

.btn-group .input {
    float: left;
    position: relative;
}

<div class="btn-group">    
    <input class="span2 input" id="fruit_select" name="fruit" />            
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">apple</a></li>
        <li><a href="#">orange</a></li>
        <li><a href="#">banana</a></li>
    </ul>
</div>

With these it helps I managed to show a dropdown button inside a dropdown menu of another dropdown button. , I solved it by adding:
$(this).parent().toggleClass('open');

    <a class="dropdown-toggle btn" data-toggle="dropdown" href="javascript:;" 
onclick="$(this).parent().toggleClass('open');">
      Search by date&nbsp;<span class="caret"></span>
    </a>

.btn-group.open .btn-group .btn.dropdown-toggle{
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}