Wednesday, January 16, 2013

HTML select object in form



HTML select object in form represents a list. Example:
The user Javascript function searchstudent() to get search text from search box and compare
to each option text, if matched part of the string (case sensitive), move it to the top of option.
"For case insensitive,   /blue/i is used
var str="Mr. Blue has a blue house";
document.write(str.search(/blue/i)); // return -1 if not matched, return the matched position (number)" "
 Code:
<select  name="users-out" id="students-out"  multiple="multiple" size="10">
                <option value="4" title="Mr. Student Account">Mr. Student Account</option>
                 <option value="28" title="Mr JJ DD">Mr JJ DD</option>
                 <option value="32" title="Dr Jack Doe">Dr Jack Doe</option>
                  <option value="26" title="Dr Jack Doe1">Dr Jack Doe1</option>
                  <option value="30" title="Dr Jane Doe2">Dr Jane Doe2</option> 
                  </select>
 <br />
 Input<input type="text"  id="search" onkeyup="searchstudent()"/>
 <script type="text/javascript">
          function searchstudent(){
             var searchvalue= document.getElementById('search').value;
             var from_s = document.getElementById('students-out');
             for (var i=0;i<from_s.options.length-1;i++) {
                var st=from_s.options[i].text;
                  if(st.search(searchvalue)>-1) {
                  var temp  = from_s.options[i];
                 from_s.add(temp, from_s.options[0]);
                 }           
             }
          }

</script>
Here  using from_s =  document.getElementById('students-out'); to get select object by id,
 from_s.options.length to get total number of options,
from_s.options[i].text; to get text for each option,  using slect object method add
i.e.  from_s.add(temp, from_s.options[0]) to add options i in front of option 0.

 

1 comment:

  1. Hi, I want to do combobox in combobox. How can I make it? Can you help me?
    For example;
    Choose Country
    Choose City
    Choose Town
    like this.

    ReplyDelete