html-select | 易学教程

What is the most efficient way to sort an Html Select's Options by value, while preserving the currently selected item?

阅读更多关于 What is the most efficient way to sort an Html Select's Options by value, while preserving the currently selected item?

I have jQuery but I'm not sure if it has any built-in sorting helpers. I could make a 2d array of each item's text , value , and selected properties, but I don't think that javascript's built in Array.sort() would work correctly. Extract options into a temporary array, sort, then rebuild the list: var my_options = $("#my_select option"); var selected = $("#my_select").val(); my_options.sort(function(a,b) { if (a.text > b.text) return 1; if (a.text < b.text) return -1; return 0 }) $("#my_select").empty().append( my_options ); $("#my_select").val(selected); Mozilla's sort documentation

Remove Select arrow on IE

阅读更多关于 Remove Select arrow on IE

I have select element, i want to remove the arrow, then i can add other icon.. i can do that for Firefox Safari and Chrome, but this didn't work on IE9 . .styled-select select { border: 0 !important; /*Removes border*/ -webkit-appearance: none; /*Removes default chrome and safari style*/ -moz-appearance: none; /*Removes default style Firefox*/ background: url('select_icon.png') no-repeat; background-position: 179px 7px; text-indent: 0.01px; text-overflow: ""; color: #FCAF17; width:200px; } SEE Fiddle on IE9 . all what i need is remove the arrow in ie9 Please JSFIDDLE answer. Praveen In IE9, it

Are Multi-line Options in Html Select Tags Possible?

阅读更多关于 Are Multi-line Options in Html Select Tags Possible?

问题 Is it possible (using HTML only) to display select with option s that span multiple lines each? 回答1: It is not possible using html select control. You can use a div that can act as a dropdown list using JavaScript and css. 回答2: not only is it not possible on standard html, but it would then (as an object) become incompatible with the way IOS devices handle the option tag , which is to display a scroll list so it is not even reasonable to want the option tag to behave that way as it would

Html Select box options on Hover?

阅读更多关于 Html Select box options on Hover?

I've seen this very simple selectbox on youtube, where the select options are visible on hover (instead of clicking), as seen in following screenshot. I'm trying to create similar effect in the following simple select box. Can someone please help how this can be done? Thanks. <select name="size"> <option value="small">Small</option> <option value="medium">Medium</option> <option value="large">Large</option> </select> Here's one way of doing it, though I'd prefer a more plug-in approach (rather than hard-coding the html ul ): $('#selectUl li:not(":first")').addClass('unselected'); // Used to

Rendering a hierarchy of “OPTION”s in a “SELECT” tag

阅读更多关于 Rendering a hierarchy of “OPTION”s in a “SELECT” tag

问题 My problem is HTML and CSS related. I have a hierarchy type structure that I want to display inside a list. The hierarchy contains Countries, States and Cities (it is three levels deep). I want to display the list inside a select list, each item type (Country, State, City) must be selectable. The items should appear indented as: United States - Hawaii -- Kauai - Washington -- Seattle -- Chelan The problem is with the indentation. I am trying to use either margin-left or padding-left to indent

How to expand 'select' option width after the user wants to select an option

阅读更多关于 How to expand 'select' option width after the user wants to select an option

问题 Maybe this is an easy question, maybe not. I have a select box where I hardcode with width. Say 120px. <select style="width: 120px"> <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option> <option>ABC</option> </select> I want to be able to show the second option so that the user can see the full length of the text. Like everything else. This works fine in Firefox, but doesn't work with Internet Explorer6. 回答1: If you have the option pre-existing in a fixed-with <select> , and

How do I change an HTML selected option using JavaScript?

阅读更多关于 How do I change an HTML selected option using JavaScript?

I have option menu like this: <form name="AddAndEdit"> <select name="list" id="personlist"> <option value="11">Person1</option> <option value="27">Person2</option> <option value="17">Person3</option> <option value="10">Person4</option> <option value="7">Person5</option> <option value="32">Person6</option> <option value="18">Person7</option> <option value="29">Person8</option> <option value="28">Person9</option> <option value="34">Person10</option> <option value="12">Person11</option> <option value="19">Person12</option> </select> </form> And now I want to change the selected option by using an

HTML SELECT - Change selected option by VALUE using JavaScript

阅读更多关于 HTML SELECT - Change selected option by VALUE using JavaScript

问题 There can be many options in a SELECT dropdown. <select id="sel"> <option value="car">1</option> <option value="bike">2</option> <option value="cycle">3</option> ... </select> I'm creating a Update Profile page where a user's profile is retrieved from the database and a form is shown with those values. When it comes to SELECT dropdown, there are many options. So, its tedious test all values if (value == '1') echo "<option selected value='car'>1</option>";` So, I want to have the corresponding

Using $index with the AngularJS 'ng-options' directive?

阅读更多关于 Using $index with the AngularJS 'ng-options' directive?

问题 Say that I bind an array to a select tag using the following: <select ng-model="selData" ng-options="$index as d.name for d in data"> In this case, the associated option tags are assigned a sequence of index values: (0, 1, 2, ...). However, when I select something from the drop-down, the value of selData is getting bound to undefined . Should the binding actually work? On the other hand, say that I instead do the following: <select ng-model="selData" ng-options="d as d.name for d in data">

How to get equal width of input and select fields

阅读更多关于 How to get equal width of input and select fields

问题 On the form, I have one select and two input fields. These elements are vertically aligned. Unfortunately, I can't get equal width of these elements. Here's my code: <select name="name1" style="width:198px"> <option>value1</option> <option>value2</option> </select><br/> <input type="text" name="id1" style="width:193px"><br/> <input type="text" name="id2" style="width:193px"> For above example, the best width for select element is 198 or 199 px (of course I tried 193px, but the difference is