Wednesday 15 September 2010

javascript - HTML Select Tag and changing values in the drop box -


I have a select box, I want to drop down the text to show one thing and when it is selected in the box If it goes, then this one else does not show my value tag either I would appreciate all the help. For example:

For example:

Select the selection box when it is not left below, should say and value is selected:

T2 <

T1: (includes T1A, T1B, and T1C): Tumor 2 cm (3 inches) 4 inches) or less.

T2: The tumor is more than 2 cm but not more than 5 centimeters (2 inches).

T3: The tumor is more than 5 cm.

Option labels are not fully supported (even if they think they are :))

To trick and work it , Add a first blank & lt; Options & gt;
We will use jQuery

  • Hold the selected option value,
  • copy that value to text and empty & lt; Options & gt; Tags

    Value for jQuery

      $ .fn SelectLabelize = function () {var v = $ (': selected', this) .val (); $ ('Option', this) .eq (0) .text (v) .val (v) .prop ('selected', true); }; $ ('Select'). Each (function () {$ (this) .selectLabelize ();}); $ ('Choose'). ('Change', function () {$ (this) .selectLabelize ();});   

    In view of such a HTML :

      & lt; Select & gt; & Lt; Options & gt; & Lt; / Options & gt; & Lt; Optgroup label = "T1" & gt; & Lt; Option value = "T1a" selected & gt; A - Tumor is 2 centimeters (3/4 inches) or less. & Lt; / Option & gt; & Lt; Option value = "t 1b" & gt; B - Tumors are 2 cm (3/4 inches) or less. & Lt; / Option & gt; & Lt; Option value = "t 1c" & gt; C - Tumors are less than 2 cm (3/4 inches) or less. & Lt; / Option & gt; & Lt; / Optgroup & gt; & Lt; Optgroup label = "T2" & gt; & Lt; Option value = "T2" & gt; The tumor is more than 2 cm but not more than 5 cm (2 inches). & Lt; / Option & gt; & Lt; / Optgroup & gt; & Lt; Optgroup label = "T3" & gt; & Lt; Option value = "T3" & gt; The tumor is more than 5 cm & Lt; / Option & gt; & Lt; / Optgroup & gt; & Lt; / Select & gt; Pure JS must be used:  

       code> select function label ( ) {Var v = this.value; this. Options [0]. WinnerHTML = v; this. Option [0] .value = v; this. Options [0]. Selected = true; } Var sel = document.getElementsByTagName ('Select'); Var ev = document.createEvent ('Event'); Ev.initEvent ('change', true, false); (Var i = 0; i & lt; sel.length; i ++) {cell [i] .addEventListener ('change', select label); Sel [i] .dispatchEvent (EV); }    

No comments:

Post a Comment