Hack: Display a text in Select that is not Found in options.

[belthazar]

---

Hey ya guys. just want to share this piece of useful hack just in case you might need it.

Problem: Have you ever wanted to display a text in <select> that is not found on the select's <option>'s?

Solution:
What i did here was i have a select with grouped options. upon selection of an item in the select element, i wanted to display it such that the Label of the optgroup and the option text is displayed together. it's a rough solution so suggestions would be welcome.

Javascript Code

var oldList = '';

function delList(obj){
    for ( i = obj.length-1; i >= 0; i--){
        obj.remove(i); 
    }
}
function addOptionInList(list,text,value){
  var elOptNew = document.createElement('option');
  elOptNew.text = text;
  elOptNew.value = value;
 
  try {
    list.add(elOptNew, null); // standards compliant; doesn't work in IE
  }
  catch(ex) {
    list.add(elOptNew); // IE only
  }
}

//Modes:
//0: Display Original List 
//1: Display Changed List
function changeList(obj,event){
    if ( oldList == '' ){
        oldList = obj.innerHTML;
    }
    mode = document.getElementById('mode').value;
    selectedIndex = document.getElementById('selectedIndex');
    if( mode == "0" && event == "focus"){ // fire onClick
         obj.innerHTML = oldList;
         document.getElementById('mode').value = 1;
         obj.selectedIndex = selectedIndex.value; 
    } else { // fire onChange
         if( event == "change"){
             selectedIndex.value = obj.selectedIndex; 
             parent = obj[obj.selectedIndex].parentElement
             if(!parent){
                 parent =  obj[obj.selectedIndex].parentNode
             }
             label = parent.label;
             value = label+', '+obj.value;
             text = label+', '+obj.value;
             delList(obj);
             addOptionInList(obj,text,value);
             document.getElementById('mode').value = 0;
             obj.blur();
         }
    }
}

<input type=hidden id=mode value='1'>
<input type=hidden id=selectedIndex value='0'>
<select id=sel onchange="changeList(this,'change');" onfocus="changeList(this,'focus');">
  <optgroup label="Car">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  </optgroup>
  <optgroup id=motorcycle label="Motorcycle">
  <option>Harley</option>
  <option>Suzuki</option>
  <option>Honda</option>
  <option>Ninja</option>
  </optgroup>   
</select>

here's a link for the output.:http://jsfiddle.net/gqpp9/1/embedded/result/

any comments/suggestions for improvement are welcome.

[Dax101106]

Nosebleed ko bro...hahahahaha...HTML palang daan...hahahahaha...

[nullpointer]

bro, make it clear which of those things you mean a hack? optgroup is not a hack...maybe wa ko ka gets unsa jud imo buot ipasabot..

[belthazar]

bro, make it clear which of those things you mean a hack? optgroup is not a hack...maybe wa ko ka gets unsa jud imo buot ipasabot..

bai!.. well, ang hack ana is lahi ang nka display sa select. if mag select ka og "Harley" for example, dili "Harley" and nka display sa select.. currently not possible ni xa sa html krn ( as far as i know.. )

[belthazar]

Nosebleed ko bro...hahahahaha...HTML palang daan...hahahahaha...

hehehe.. pasakay kau ka bro!!

[noy.juan]

<script>
$(document).ready(function(){
    $('#sel').find('option').each(function(){
        $(this).val($(this).html());
    });
    $('#sel').change(function(){
        var optgroup = $(this).find(':selected').parent().get(0).label;
        var oldVal = $(this).val();
        var sel = $(this).find(':selected');            
        sel.html(optgroup + ', ' + oldVal).addClass('selected');
    }).focus(function(){
        var theValue = $(this).val();
        $('#sel').find('.selected').each(function(){
            $(this).removeClass('selected');
            $(this).html($(this).val());
        });
    }).trigger('change');
 });
</script>
<select id="sel">
      <optgroup label="Car">
            <option>Volvo</option>
            <option>Saab</option>
            <option>Mercedes</option>
            <option>Audi</option>
      </optgroup>
      <optgroup id="motorcycle" label="Motorcycle">
            <option>Harley</option>
            <option>Suzuki</option>
            <option>Honda</option>
            <option>Ninja</option>
      </optgroup>   
</select> 

heres my jquery version of your code on DOM manipulation

http://jsfiddle.net/UHXPF/embedded/result/

after doing it i was able to find jquery bug... will try checking this...

@belthazar its not actually a hack, its called HTML DOM manipulation

[belthazar]

after doing it i was able to find jquery bug... will try checking this...

the bug you mentioned, is it about the text in the option not changing back to it's original?

[belthazar]

kayasa.. d kayo ko kabasa og jQuery da.. old school man gd ko..

[noy.juan]

the bug you mentioned, is it about the text in the option not changing back to it's original?

yes... but it only happens during focus... however it replicates your code...

[kamahak]

bro, make it clear which of those things you mean a hack? optgroup is not a hack...maybe wa ko ka gets unsa jud imo buot ipasabot..

It is probably because of your definition of what a hack is. Mao nang wa ka kasabot. What you probably are basing this on is hacking that is portrayed by media. IE, getting into computers, defacing websites, etc.

In actuality, hacking, is a mindset. A mindset that entices you to think out of the box to make something (anything) do what it isn't supposed to.

In this case, the hack is to make html 'select' element show different text when you choose an option. In the example, it was supposed to show Volvo or Harley. Instead, when you select it, it shows: Cars, Volvo or Motorcycles, Harley.

@TS- Nindot pagkahimo. Tan-awn nya nakog tarong ang code puhon.