html-select | 易学教程

Editable 'Select' element

阅读更多关于 Editable 'Select' element

问题 I would like to have a select element in the form but besides the options in the dropdown, it would be useful to be able to edit it and add new option but not with another input text, I need all in once. Is it possible? 回答1: Nothing is impossible. Here's a solution that simply sets the value of a text input whenever the value of the <select> changes: Demo on JSFiddle Rendering has been tested on Firefox and Google Chrome. <style> .select-editable { position:relative; background-color:white;

Select dropdown with fixed width cutting off content in IE

阅读更多关于 Select dropdown with fixed width cutting off content in IE

The issue: Some of the items in the select require more than the specified width of 145px in order to display fully. Firefox behavior : clicking on the select reveals the dropdown elements list adjusted to the width of the longest element. IE6 & IE7 behavior : clicking on the select reveals the dropdown elements list restricted to 145px width making it impossible to read the longer elements. The current UI requires us to fit this dropdown in 145px and have it host items with longer descriptions. Any advise on resolving the issue with IE? The top element should remain 145px wide even when the

How to change options of <select> with jQuery?

阅读更多关于 How to change options of with jQuery?

Suppose a list of options is available, how do you update the <select> with new <option> s? CMS You can remove the existing options by using the empty method, and then add your new options: var option = $('<option></option>').attr("value", "option value").text("Text"); $("#selectId").empty().append(option); If you have your new options in an object you can: var newOptions = {"Option 1": "value1", "Option 2": "value2", "Option 3": "value3" }; var $el = $("#selectId"); $el.empty(); // remove old options $.each(newOptions, function(key,value) { $el.append($("<option></option>") .attr("value",

jQuery get selected option value (not the text, but the attribute 'value')

阅读更多关于 jQuery get selected option value (not the text, but the attribute 'value')

问题 Okay, I have this code: <select name=\"selector\" id=\"selector\"> <option value=\"1\">Option 1</option> <option value=\"2\">Option 2</option> </select> And I\'d like to get the value of the option selected. Example: \'Option 2\' is selected, and the value of it is \'2\'. The \'2\' is the value I need to get and not \'Option 2\'. 回答1: Use .val to get the value of the selected option. See below, $('select[name=selector]').val() 回答2: I just wanted to share my experience For me, $('#selectorId')

Removing an item from a select box

阅读更多关于 Removing an item from a select box

How do I remove items from, or add items to, a select box? I'm running jQuery, should that make the task easier. Below is an example select box. <select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select> dsimard Remove an option: $("#selectBox option[value='option1']").remove(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="selectBox" id="selectBox"> <option value="option1">option1<

How to add Drop-Down list (<select>) programmatically?

阅读更多关于 How to add Drop-Down list () programmatically?

问题 I want to create a function in order to programmatically add some elements on a page. Lets say I want to add a drop-down list with four options: <select name=\"drop1\" id=\"Select1\"> <option value=\"volvo\">Volvo</option> <option value=\"saab\">Saab</option> <option value=\"mercedes\">Mercedes</option> <option value=\"audi\">Audi</option> </select> How can I do that? 回答1: This will work (pure JS, appending to a div of id myDiv ): Demo: http://jsfiddle.net/4pwvg/ var myParent = document.body;

Default text which won't be shown in drop-down list

阅读更多关于 Default text which won't be shown in drop-down list

问题 I have a select which initially shows Select language until the user selects a language. When the user opens the select, I don\'t want it to show a Select language option, because it\'s not an actual option. How can I achieve this? 回答1: Kyle's solution worked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML. Adding a value of selected to the item we want to appear as a header forces it to show in the first place as a placeholder.

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> 回答1: Here's one way of doing it, though I'd prefer a more plug-in

jQuery remove options from select

阅读更多关于 jQuery remove options from select

问题 I have a page with 5 selects that all have a class name \'ct\'. I need to remove the option with a value of \'X\' from each select while running an onclick event. My code is: $(\".ct\").each(function() { $(this).find(\'X\').remove(); }); Where am I going wrong? 回答1: Try this: $(".ct option[value='X']").each(function() { $(this).remove(); }); Or to be more terse, this will work just as well: $(".ct option[value='X']").remove(); 回答2: $('.ct option').each(function() { if ( $(this).val() == 'X' )

Hide select option in IE using jQuery

阅读更多关于 Hide select option in IE using jQuery

Currently I am using jQuery to hide/show select options using following code. $("#custcol7 option[value=" + sizeValue + "]").hide(); This works fine in Firefox, but doesnt do any good in other browsers. How to I hide options from select in Chrome, Opera and IE? I just came across this and instead of cloning the entire select over and over I just replaced the options that need to be hidden with span elements and hiding the spans ( though the browser didnt visually show them anyway, I think ) - you may need to change your code ( if complex ) to iterate through the spans for complex logic. The