How to add Drop-Down list (select) programmatically?
This will work (pure JS, appending to a div of id myDiv
):
Demo: http://jsfiddle.net/4pwvg/
var myParent = document.body;
//Create array of options to be addedvar array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select listvar selectList = document.createElement("select");selectList.id = "mySelect";myParent.appendChild(selectList);
//Create and append the optionsfor (var i = 0; i < array.length; i++) { var option = document.createElement("option"); option.value = array[i]; option.text = array[i]; selectList.appendChild(option);}
How to SELECT a dropdown list item by value programmatically
If you know that the dropdownlist contains the value you're looking to select, use:
ddl.SelectedValue = "2";
If you're not sure if the value exists, use (or you'll get a null reference exception):
ListItem selectedListItem = ddl.Items.FindByValue("2");
if (selectedListItem != null)
{
selectedListItem.Selected = true;
}
Programmatically create select list
var arr = [
{val : 1, text: 'One'},
{val : 2, text: 'Two'},
{val : 3, text: 'Three'}
];
var sel = $('<select>').appendTo('body');
$(arr).each(function() {
sel.append($("<option>").attr('value',this.val).text(this.text));
});
How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
You can't do this with a HTML select tag, but you can do it with JavaScript and HTML. There are variety of existing controls that do this - for instance, the "suggest" list attached to the SO "interesting/ignored tag" entry, or Gmail's lookup for email adresses.
There are many JavaScript+HTML controls that provide this capability--look for autocomplete controls for ideas.
See this link for the Autocomplete control...http://ajaxcontroltoolkit.codeplex.com/
OnChange event using React JS for drop down
The change event is triggered on the <select>
element, not the <option>
element. However, that's not the only problem. The way you defined the change
function won't cause a rerender of the component. It seems like you might not have fully grasped the concept of React yet, so maybe "Thinking in React" helps.
You have to store the selected value as state and update the state when the value changes. Updating the state will trigger a rerender of the component.
var MySelect = React.createClass({
getInitialState: function() {
return {
value: 'select'
}
},
change: function(event){
this.setState({value: event.target.value});
},
render: function(){
return(
<div>
<select id="lang" onChange={this.change} value={this.state.value}>
<option value="select">Select</option>
<option value="Java">Java</option>
<option value="C++">C++</option>
</select>
<p></p>
<p>{this.state.value}</p>
</div>
);
}
});
React.render(<MySelect />, document.body);
Also note that <p>
elements don't have a value
attribute. React/JSX simply replicates the well-known HTML syntax, it doesn't introduce custom attributes (with the exception of key
and ref
). If you want the selected value to be the content of the <p>
element then simply put inside of it, like you would do with any static content.
Learn more about event handling, state and form controls:
- http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
- http://facebook.github.io/react/docs/forms.html
Adding options to a select using jQuery?
This did NOT work in IE8 (yet did in FF):
$("#selectList").append(new Option("option text", "value"));
This DID work:
var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);
how to programmatically select an option of a dropdown list in jquery mobile
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Script taken from: http://jquerymobile.com/demos/1.0a4/docs/forms/forms-selects.html
jQuery remove options from select
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();
Related Topics
What's the Best Way to Make a D3.Js Visualisation Layout Responsive
How to Update State.Item[1] in State Using Setstate
Change Values in Array When Doing Foreach
Fastest Way to Convert JavaScript Nodelist to Array
Accessing Private Member Variables from Prototype-Defined Functions
How to Include a JavaScript Script File in Angular and Call a Function from That Script
Convert Column Index into Corresponding Column Letter
Split a String by Commas But Ignore Commas Within Double-Quotes Using JavaScript
Are Variable Operators Possible
Regex to Match All Instances Not Inside Quotes
Running JavaScript in Selenium Using Python
Firing Event on Dom Attribute Change
React Useeffect in Depth/Use of Useeffect
Determine Original Name of Variable After Its Passed to a Function
Check If a Variable Is a String in JavaScript