HTML Drop Down List - tidy up?

Question

I've implemented a html drop down list and all seems to be fine, would just like to tidy it up:

1) When the order screen loads 'Select' appears as the initial option on the drop down. When the user clicks the drop down the 'select' still appears. I would like to hide 'select' when the drop down is being selected, some option in the view I am missing?

2) validation wise, I cant make an order until an option is selected from the drop down. This is fine however where before I was using a text box and got a nice big red error message, now I get nothing, How can I notify the user an option has to be chosen?

<div class="editor-field">
@Html.DropDownListFor(x => x.Selected_BicycleModelId, Model.BicycleModels, "Select")
@Html.ValidationMessageFor(model => model.Order.BicycleModel)
</div>

Update

@Html.ValidationMessageFor(model => x.Selected_BicycleModelId)

has resolved the validation message issue (thanks Roman Ko). anyone ideas on the 'select' dissapearing - JQuery?

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

Try this:

@Html.ValidationMessageFor(model => x.Selected_BicycleModelId)

When it comes to the 'select' caption, you can try to remove it using - for example - jQuery:

$(document).on('change', '#Selected_BicycleModelId', function () {
   $("#Selected_BicycleModelId option[value='']").each(function () {
       $(this).remove();
   });
});

See jQuery remove options from select for more detailed info.

edited May 23 '17 at 11:49

Community

1
1

answered Aug 05 '14 at 18:18

romanoza

4,775
3
27
44

Wow. Good catch. I totally did not see that at all. Sheesh. – Chris Pratt Aug 05 '14 at 18:18
Thanks for the reply roman, that resolved the validation msg, still working on the 'select' though – Mick Aug 05 '14 at 18:46

score 1 · Answer 2 · answered Aug 05 '14 at 18:16

This is not possible. The <select> element has no ability to provide a placeholder value. As a result, a common workaround, and the same that Razor employs, is to add another option with an empty value attribute. This appears in the dropdown because it is very much an option like any other in that list. It's your form validation, both client-side and server-side that makes it not a "valid" option.
~~You'll need to provide more information to determine why the validation is no longer working. In particular, the property and any associated attributes from your model would be helpful.~~ See @RomanKo's answer. I don't want to steal his thunder by just posting the same thing here. For my part, I totally missed it.

HTML Drop Down List - tidy up?

2 Answers2