So let's see , How to use js Realization select Dynamic addition option.

//1. Dynamically create select
function createSelect(){
var mySelect = document.createElement("select"); = "mySelect";
} //2. Add options option
function addOption(){
// according to id Look for objects ,
var obj=document.getElementById('mySelect');
// Add an option
obj.add(new Option(" Text "," value ")); // Method 1 :
obj.options.add(new Option("text","value")); // Method 2 :
for(var i=0;i<10;i++){
obj.options[i]=new Option(" New text "," The new value "); // Method 3 :
} //3. Remove all options option
function removeAll(){
var obj=document.getElementById('mySelect');
} //4. Delete an option option
function removeOne(){
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //index, To delete the serial number of an option
} //5. Get options option Value
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; // Serial number , Take the serial number of the currently selected option
var val = obj.options[index].value; //6. Get options option The text of
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
var val = obj.options[index].text; //7. Modify options option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
var val = obj.options[index]=new Option(" New text "," The new value "); //8. Delete select
function removeSelect(){
var mySelect = document.getElementById("mySelect");

In the example , be used add() Method

Used to direct to <select> Add one <option> Elements .


option It's necessary . To add an option element . It has to be option or optgroup Elements .
before It's necessary . Add a new element before the element in the options array . If the parameter is null, Element to the end of the options array .

About new Option() More articles about

  1. stay C# Use in F# Of option Variable

    In the use of C# And F# Mixed programming ( It is usually used C# Realization GUI,F# Responsible for data processing ), It's a common experience to judge a option yes None still Some. although Option module Are there in i ...

  2. jsPanel plug-in unit Option summary

    jsPanel plug-in unit Option summary Study jsPanel In addition, the related options are summarized , For easy reference . # Option name Category Brief description 1 autoclose configuration Set a time in milliseconds , Noodles ...

  3. jquery option

    turn --jquery Dynamic addition option Example //js Dynamic addition option var sel= document.getElem ...

  4. An analysis json Series parallel assembly echarts Of option Function analysis of

    origin : In the assembly echart On the page , Meet such a problem , It's a time that needs to be in the inner layer of the loop , At the same time, loop the outer layer , In the inner loop, the values obtained from the outer loop are stored in , It leads to a state of entanglement , With a lot of effort , Finally, the solution is as follows . Record , Green is ...

  5. AngularJS The drop-down list select stay option After the dynamic change, there is an error item

    scene : Select After initialization , Choose select One of the options adopt AngularJS to update select The option to Wrong writing : HTML( Use ng-repeat) <div ng-app="Te ...

  6. select Initialize add option, Give the echo value through the tag , Because of the echo value and initialization value option There is a duplicate value in , Weight removal and other issues !

    The first picture : The second picture /** * The purpose of this method is to remove heavy , The so-called weight removal is Because echo to select The value is attached and set to selected Selected state , And before we initialize all the select add to option Element is repeated in the echoed value ...

  7. solve error: option --addons-path: The addons-path &#39;local-addons/&#39; does not seem to a be a valid Addons Directory!

    Description odoo Source file path -/odoo-dev/odoo/: My module plug-in path ~/odoo-dev/local-addons/my-module stay my-module Created in ...

  8. echarts Show the effect in option It's a must have attribute in

    Write the simplest effect to make option It's an indispensable property in the world . var option = { xAxis:[ //x Axis , Array objects , There's at least one object under it {.....} ], yAxis:[//y Axis , Array objects , And then ...

  9. Give Way select Of option Tags support event monitoring ( Such as copy operation )

    This is the title , Give Way option Support event monitoring , It shouldn't be difficult , What is there to say ? In fact, there are still some , By default, the browser code is unable to directly option Tag to operate , Not only JS Event monitoring , still CSS The style is set I checked some information , Let's say ...

  10. Expand htmlhelper.DropDownListFor Support list Data sources and option Attribute added

    mvc Self contained DropDownListFor The data source must be IEnumerable<SelectListItem>. also option Adding custom attributes is not supported . In the use of bootstrap-select Group ...

Random recommendation

  1. TypeScript Type Innference( Type inference )

    In this section , We will introduce TypeScript Type inference in . We will discuss where type inference needs to be used and how to infer . Basics stay TypeScript in , Type inference will be used to provide type information in several places where type annotations are not explicitly specified . ...

  2. Android Technology accumulation : The development of specification

    Reprinted from Keegan Small steel Writing norms 1. The coding method is unified UTF-8. Android Studio The default is UTF-8, ...

  3. JS Common tool functions

    /** * Created by gaojun-pd on 2016/10/27. */ var Util = { /** * 1. Judgment is not empty * 2. Gets the real length of the string Chinese characters count for two * 3. Judge the parameter class ...

  4. Atitit Function flow design of password modification attilax summary

    Atitit Function flow design of password modification attilax summary 1.1. Be careful 1 1.2. When designing the function of modifying the user's password, the user ID Where to keep it ?1 1.3. Ui Design 1 1.4. Function design source code 1 1.5. Agt ...

  5. rsync Catalog Slash

    Source : No : Sync   Contents and contents belt /: Just synchronize content target Catalog : stay . -Warv --delete -W, --whole-file            copy files whole ( ...

  6. Android Handle Bitmap Some of the ways # File with the Bitmap The method between 1. Load from file Bitmap 01./** 02.* @brief From file ...

  7. springboot add to swagger2 Components

    swagger2 It's a program that can be built and debugged RESTful API Components of the document , utilize swagger2 Annotations can be quickly built in projects Api file , And it provides testing API The function of 1, Introduce dependencies <dependency ...

  8. CSS3 A batch of hover Special effects

    The original version of this special effect is codepen above hover.css project . I like it very much, so I put all the hover I wrote it myself , It's troublesome to upload files, so just put css Integrate to HTML In the code . After the code is copied and saved, it can be opened with a browser ...

  9. hibernate left join fetch What went wrong

    1. First, manyToOne The problem of For example, the organization of a user , It could be multiple , Four at most , then userEntity There is the following code : Relational query : The first way : The code is as follows StringBuilder sql = ...

  10. CCF- Chess evaluation 201803-04( edition 2.0)------( I wrote a bloated 1.0 edition , And I'm happy 233)

    The core : Game search tree     The scores of both sides are opposite to each other dfs (x,y,player): The player player It's over (x,y) The maximum score after that Fallible : Judge the winner first , Judge the draw again To be improved : check() Function ...