Reputation: 2377
I am using Bootstrap3 in my MVC5 application.
When I use @HtmlHelper.DropDownFor
to show a drop down list, bootstrap styles are not getting applied for the combo box in Internet Explorer.
So as a workaround, I wrote a custom code to show a drop down list.
<div class="col-md-6 dropdown">
<button class="col-md-6 form-control input-sm dropdown-toggle" data-val="true" role="button" id="SystemSize" name="dropdown1" data-toggle="dropdown" value="llll">
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdown1">
@foreach (var item in items)
{
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">@item.Text</a></li>
}
</ul>
</div>
I referred the following bootstrap link to come up with this approach.
I wrote Jquery to update the text of the button on click of the anchor links in the drop down.
The problem is when I submit the form, this button's text is not getting posted.
How do I solve this?
Upvotes: 0
Views: 632
Reputation: 3228
Normally we use Selects instead of drop-down inside forms. Check following link;
http://getbootstrap.com/css/#forms-controls
Example:
<select class="form-control">
@foreach(var item in items)
{
<option value="@(item.Value)" >@item.Text</option>
}
</select>
If you want to use the Drop-down, then you can use hidden field as follow to store the value and set the value within the function you wrote to update the text.
<input type="hidden" id="SystemSize" name="SystemSize" value="">
Thanks!
Upvotes: 1