Show selection from select form as links

Question

I have a classic select form like

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

I would like to know if we can show my selection as links in a separate div. So, if i select option "saab", see in that div Swedish Cars > Saab

The solution, if exist, must be done with jquery 1.8.3 and ie8/mobile device compatible. Thanks

I have found a partial solution here http://jsfiddle.net/MJ26K/3/

As you can see it shows the value only when you click on the button and olso, in a popup alert. Now remains to find a solution to show it in a div instead of popup alert and on select, not on button click...

Shakawkaw Shakawkaw · Accepted Answer · 2015-12-02T19:41:08

Did you tried doing it? You have the solution right there just needed to make a few changes...

$(function(){
   $("#addButton").click(function () {
       var select = $('select');
       var selectedItem= select.find(':selected');
       var selectedVal = select.val();
       var selectedText = selectedItem.text();
       var optgroupLabel = selectedItem.parent().prop('label');
       $('div.result').text(optgroupLabel + " > " + selectedVal);
   });       
});

http://jsfiddle.net/MJ26K/39/

Not tested in IE8 but as far as I know there should not be any issues with anything on this code.

Show selection from select form as links

1 Answers