html-select

In jQuery, you can stop a <select> from opening it's dropdown menu by using event.preventDefault in the mousedown handler. Allowing you to replace the dropdown with something else while still retaining the original style of the form element. This works fine in Chrome and MSIE, but in FireFox and Opera the dropdown appears regardless. (Not tested on Safari) Example: http://jsfiddle.net/9cmEh/ The select element should look enabled and still respond to all user interaction as if enabled, but the dropdown should not be rendered. Instead the dropdown will be replaced by something custom rendered,

I want to dynamically control the size of a multi-select. html <select class="form-control" ng-model="formData.selected_tests" ng-options="c.test for c in tests" multiple="true" ng-multiple="true" name="tests" id="tests" size="{{ tests.length }}" ng-size="{{ tests.length }}"> </select> js $http({ method: 'GET', url: '/api/v1/test' }) .success(function(data, status, headers, config) { $scope.tests = data; }) .error(function(data, status, headers, config) {}); Output from inspect element <select class="form-control ng-valid ng-dirty" ng-model="formData.selected_tests" ng-options="c.test for c in

Not sure if this can be done but can I split the text in the option tags? Example, normal styling: <select> <option value="">First - A</option> <option value="">Car - B</option> <option value="">Black - C</option> <option value="">Super Duper - D</option> </select> How can I get it to look like this: <select> <option value="">First - A</option> <option value="">Car - B</option> <option value="">Black - C</option> <option value="">Super Duper - D</option> </select> I've tried added a span tag nested in the option tag but that didn't work <option> tags do not accept HTML content. You can only

I've got this ASP.Net code: <select name="subcategory" color="<%=Session("TextColor")%>" style="font: 8pt arial" onchange="UpdateFlag=true;"> <% if not IsNewBusiness then %> <option value="0">Existing <option value="1">Organic Growth <% else %> <option value="0">New <option value="1">Assumed <% end if %> </select> ...which should, based on the value of the Boolean IsNewBusiness, load one or the other of a pair of items to the html select element. However, the same logic always equates to true ("not IsNewBusiness"), and the first two items ("Existing" and "Organic Growth") are always the ones

I want to disable a particular option from AngularJS dropdown. It should be listed in the dropdown but should not allow it to be selected. So i need to disable it. MyFile.tpl.html <select class="form-control" ng-model="selectedFruits" ng-options="fruit as fruit.name for fruit in fruits"> </select> MyController.js $scope.fruits = [{'name': 'apple', 'price': 100},{'name': 'guava', 'price': 30}, {'name': 'orange', 'price': 60},{'name': 'mango', 'price': 50}, {'name': 'banana', 'price': 45},{'name': 'cherry', 'price': 120}]; Here all the fruit names should be listed in the dropdown but mango and

I have tried to bold the first option of the select box but it's only working in Firefox, not other browsers (Chrome, IE). Here is the code I've tried. HTML <select id="htmldisabled"> <option class="bold">test1</option> <option>test2</option> <option>test3</option> <option>test4</option> <option>test5</option> <option>test6</option> </select> CSS .bold { font-weight:bold; } See demo at jsfiddle . #htmldisabled:first-child{ font-weight:bold; } danwellman As you've discovered, it can't be done cross-browser ;) Best to use a selectbox replacement script if you need special formatting or display

I am displaying a list of dropDownLists inside a ForEach loop. This is the code @foreach (var task in Model.TaskList) { <tr> <td>@Html.DropDownList("ModuleID", new SelectList(Model.ModuleList, "ModuleID", "Ordre")) </td> </tr> } I want the Module of each Task to be selected by default. This could easily be done using DropDownList if only I was binding the dropDownList to a view model, but that's not the case. Any ideas ? This could easily be done using DropDownList if only I was binding the dropDownList to a view model You already know the correct answer and are still asking the question. And