JS to create HTML tags, add the default option under Select Value and text, delete all option nodes under the SELECT element node

<pre name= "code" class= "Java" >

drop-down box tags in jsp:

<s:select name= "SJX" id= "SJX" list= "sjxlist" listkey= "BM" listvalue= "MC" size= "cssstyle=" width:100%;height : 70px; border:0 "multiple=" true "></s:select>

<pre name= "code" class= "HTML" >

Multiple= "true" means that multiple selections are supported.

How to flexibly create items under the Select tab in JS:

var oselect = $ ("SJX"), <span style= "White-space:pre" >//SJX is the ID of the SELECT tag on the HTML or JSP page, assuming that ExtJS is used, you can use Ext.getdom (' SJX ') gets the label var ooption = document.createelement ("OPTION");                         JS to create the option sub-label under the Select Tab OSelect.options.add (ooption); <span style= "White-space:pre" >// Add the new option sub-label to the Select tab under Ooption.value = "001"; <span style= "White-space:pre" >//content corresponding value value ooption.innerhtml = "Little Apple"; <span style= "White-space:pre" >//displays the contents of the dropdown box ... And so on

Note:js in such a way. It is more practical on a particular occasion, for example: This request does not return a specific interface. That is, the entire interface is not refreshed.
Instead of using an AJAX asynchronous request to make some partial data requests, the following STRUT2 methods are not valid at this time.

<pre name= "code" class= "java" ><pre name= "code" class= "java" >for (...) {hashmap<string,object> map = new hashmap<string,objcet> () map.put ("BM", "001"); Map.put ("MC", "small apple"); Sjxlist.add (map);}

The second approach is also very often used: using the STRUTS2 feature, define a list<object> variable in the action (in this case, named: sjxlist). and sets the set, Get method.

With a HashMap object, add content, for example:

</pre> when returned to the interface, the "Little Apple" is displayed in the Select drop-down box in the interface.

</pre><pre code_snippet_id= "487056" snippet_file_name= "blog_20141017_5_1612209" name= "code" class= " JavaScript "><pre name=" code "class=" HTML > The simplest way: Manually add option items to the Select tab directly on the JSP page 


Delete all option nodes under the Select tab node
Method One:
JS Code
    function deleteoptions ()          {              var obj = document.getelementsbytagname ("select") [0];              var selectoptions = obj.options;              var optionlength = selectoptions.length;              for (var i=0;i <optionlength;i++)              {                  obj.removechild (selectoptions[0]);              }          }  

Method Two: (The all option in the right-hand select is moved to the left select)
JS Code
    function moveallrightbtn () {              var columnlength=$ (' Querycolumn '). Length;              var Temptext;              var Tempvalue;              for (Var i=0;i<columnlength;i++) {                  temptext=$ (' Querycolumn '). Options[i].text;                  tempvalue=$ (' Querycolumn '). Options[i].value;                  $ (' Querycolumn '). Remove (i);                  $ (' Searchqquerycolumn '). Options.add (New Option (Temptext,tempvalue));              }          }  

None of the above two methods are good enough! Since they can not be removed from the one-time register, the $ (' querycolumn ') in option is changed because it has been deleted!

A simple and optimal method such as the following: (only need to set the length of 0)
JS Code
 
 

  
  
 
   
    $ (' Searchqquerycolumn '). options.length = 0;
 
  
 
 
JS Code
    <script>      function clearoption ()      {          document.getElementById ("Testselect"). options.length = 0;      }      </script>   

(The all option in the right-hand select is moved to the left of the Select) implementation such as the following:
JS Code
function moveallrightbtn () {          var columnlength=$ (' Querycolumn '). Options.length;          var Temptext;          var Tempvalue;          for (Var i=0;i<columnlength;i++) {              temptext=$ (' Querycolumn '). Options[i].text;              tempvalue=$ (' Querycolumn '). Options[i].value;              $ (' Searchqquerycolumn '). Options.add (New Option (Temptext,tempvalue));          }          $ (' Querycolumn '). options.length = 0;      }  



 
JS to create HTML tags, add the default option under Select Value and text, delete all option nodes under the SELECT element node