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

[belthazar]

---

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.

first, mao pd ba.. wa pd ko ka realize na mao iya pasabot.. tubag pd tarong ang bata.. hehehe..
second, unsay @TS bai? lamats..

[kamahak]

Ambot, Topic Starter mn tingai pasabot anang TS. Basta kibaw ko basta @TS kay pasabot ang Author sa thread. So, Topic Starter tingai pasabot ana. Hehe. Sunod2x, rmn ko dri. haha.

Wa ko kbantay naa na diay naka-una ug butang ug jQuery version. Hehe.

Anyways, here's my version.

HTML:

<select>
  <optgroup label="Car">
      <option>Volvo</option>
      <option>Saab</option>
      <option>Mercedes</option>
      <option>Audi</option>
  </optgroup>
  <optgroup label="Motorcycle">
      <option>Harley</option>
      <option>Suzuki</option>
      <option>Honda</option>
      <option>Ninja</option>
  </optgroup>   
</select>

JS:

$("select").change(function (event) {
    var foo = $("select option:selected")
    , bar = foo.text()
    , cat = foo.parent().attr("label")
    , old = $("select option:contains('" + cat + "')")
    , oldbar = old.html();
    
    oldbar && old.html(oldbar.replace(cat + ': ',''));
    foo.text(cat + ': ' + bar);
});

Naay duha ka bugs. Inig click nmu kay makita nmu ang "Car: " sa option. Ug kung mu click ka from one group to another kay mabilin ang "group: " na tag. Gamay ra au ko oras gd pra mka trabaho ani. Bday sa ako uyab, manlakaw pmi. Haha.

Ugma tan-awn nko balik.

[personalmgt]

My head was full of GIGO when I looked at the code, but when I looked at the the output, I was like, daaaamnnnn why was that so hard to understand

[belthazar]

cool guys.. thanks for all your jQuery versions and comments and either a hack or whatever you call it, it's still cool right? hehehe.. @kahamahak: abi ko thread starter hehe.. chuy chuy.. anyways.. i have a question for you guys, unsa na event ang gamiton para naa kay script mapa run when selecting an already selected option in a select?

things i've tried so far:

1. Tried to put events on the option tag, drawback is not all browsers support events in option tag. As far as i know, only FF supports it ( onClick ), everything else, nada.
2. onChange in select tag doesn't fire so wa gypn na.
3. Drinked coffee and rethinked steps, wa gypn.. @_@.

[noy.juan]

Ambot, Topic Starter mn tingai pasabot anang TS. Basta kibaw ko basta @TS kay pasabot ang Author sa thread. So, Topic Starter tingai pasabot ana. Hehe. Sunod2x, rmn ko dri. haha.

Wa ko kbantay naa na diay naka-una ug butang ug jQuery version. Hehe.

Anyways, here's my version.

HTML:

<select>
  <optgroup label="Car">
      <option>Volvo</option>
      <option>Saab</option>
      <option>Mercedes</option>
      <option>Audi</option>
  </optgroup>
  <optgroup label="Motorcycle">
      <option>Harley</option>
      <option>Suzuki</option>
      <option>Honda</option>
      <option>Ninja</option>
  </optgroup>   
</select>

JS:

$("select").change(function (event) {
    var foo = $("select option:selected")
    , bar = foo.text()
    , cat = foo.parent().attr("label")
    , old = $("select option:contains('" + cat + "')")
    , oldbar = old.html();
    
    oldbar && old.html(oldbar.replace(cat + ': ',''));
    foo.text(cat + ': ' + bar);
});

Naay duha ka bugs. Inig click nmu kay makita nmu ang "Car: " sa option. Ug kung mu click ka from one group to another kay mabilin ang "group: " na tag. Gamay ra au ko oras gd pra mka trabaho ani. Bday sa ako uyab, manlakaw pmi. Haha.

Ugma tan-awn nko balik.

you need to use focus event, to reset the option element when selected by the use and before the change event us trigger

this is how the flow should works in jQuery and non-jQuery

focus => change => blur

btw, TS = Thread Starter or kung kinsa nag himo sa thread...

[belthazar]

simplified version of my original code:

var _originalList = '';
var _selectedIndex = 0;

function changeList(obj){
    if ( obj.selectedIndex != 0 ){
        _selectedIndex = obj.selectedIndex;
        option = obj[_selectedIndex];
        parent = option.parentElement

        if(!parent){
            parent =  option.parentNode
        }
        option.text = parent.label+', '+obj.value;
        obj.blur();
    }
}

function showOriginalList(obj){
    if ( _originalList == '' ){
        _originalList = obj.innerHTML;
    }
    obj.innerHTML = _originalList;
    obj.selectedIndex = _selectedIndex; 
}

<select id=sel onchange="changeList(this,'change');" onfocus="showOriginalList(this);">
  <option>--- Please Select --- </option>
  <optgroup label="Car">
  <option onChange="alert(this.text);">Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  </optgroup>
  <optgroup label="Motorcycle">
  <option>Harley</option>
  <option>Suzuki</option>
  <option>Honda</option>
  <option>Ninja</option>
  </optgroup>   
</select>

• Bug to fix: unable to change the displayed text for already selected option.
• e.g. if you selected "Ninja" for example, it will be displayed as "Motorcycle, Ninja". if you select it again, no change.

@noy.juan: SAKTO gyud imo analysis sako code bai.. and glad you clarified the TS thing..

[kamahak]

Hello again. finally remembered to fix this.

you need to use focus event, to reset the option element when selected by the use and before the change event us trigger

this is how the flow should works in jQuery and non-jQuery

focus => change => blur

btw, TS = Thread Starter or kung kinsa nag himo sa thread...

Yeah, I know it would be easier to use the focus() event. But, IMHO, the beauty of jQuery is to be able to shorten JavaScript code as much as possible. As they're infamous mantra goes, "write less, do more".

Anyways, on second look of my code. The problem was obviously that my code was not remembering the last category when switching between the two. Thus, creating a bug. So, I made the appropriate fixes.

$("select").change(function () {
    var oldc;
    return function (event) {
        var foo = $("select option:selected"),
            bar = foo.text(),
            cat = foo.parent().attr("label");
        if (oldc) { // This won't exist the first time we run this
            oldfoo = $("select option:contains('" + oldc + ":')");
            oldHTML = oldfoo.html();
            oldHTML && oldfoo.html(oldHTML.replace(oldc + ': ', ''));
        }
        foo.text(cat + ': ' + bar);
        oldc = cat; // Remember it for next time
    };
}());

JSFiddle Linkage

By this time, I was having so much fun, I was just staring blankly at the screen when; BAM!

Epiphany.

The profound solution was not to search for or save the last category but to use other special characters found on the list. That's right the colon.

The result, a beautiful jQuery four-liner.

$("select").change(function (event) {
    var foo = $("select option:selected"),
        bar = foo.text(),
        cat = foo.parent().attr("label"),
        old = $("select option:contains(':')"),
        oldb = old.html();

    oldb && old.html(oldb.replace(oldb.substr(0, oldb.indexOf(':') + 2),''));
    foo.text(cat + ': ' + bar);
});

JSFiddle Linkage

Note: I say four-liner because this script is basically just four lines of code. Just edited for readability.

Thank you TS for taking away the boring times.

[nullpointer]

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.

i pretty much know what is hacking...i just don't understand what the TS wants to show

[kamahak]

i pretty much know what is hacking...i just don't understand what the TS wants to show

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.

Umm..This?

[belthazar]

Umm..This?

guys guys.. make peace not war..