Question

I’m busy with an html orderform, with steps. On the last step i’m making an summary. This is going well except for the category. Category value is filled by the database, and is the id from the category. But what i’m really need is the text in the option.

For example, category id = 62 with text: Huurwoning, now it is showing 62, but i want to show Huurwoning. This is the jsfiddle: http://jsfiddle.net/H9McM/1/

<select name="catid" onmouseup="copyText(this)" id="catid" class="inputbox required"><option value="" >Selecteer Categorie&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option><option value="62" >Huurwoning</option><option value="58" >Kamerhuur</option><option value="59" >Parkeren</option><option value="60" >Vakantiewoning</option><option value="61" >Bedrijfsruimte</option></select>

<script>
function copyText(e)
 {
    var matchingElements = document.getElementsByClassName( e.name + 'preview' ),
        matchCount = matchingElements.length;

    for (var i =0; i< matchCount; i++){
       matchingElements[i].innerHTML = e.value;
    }
 } </script>

<script>
$(".catidpreview").draggable({ containment: '#dragcontainer' });
</script>

<div class="catidpreview"></div>

Answer 1

If you mean the option text, you can try this:

matchingElements[i].innerHTML = e[e.selectedIndex].text;

Also onchange might be a better event for this task.

A live demo at jsFiddle

---

EDIT

Since you’ve complemented your question within a comment, here’s the line you’ll need within the for loop:

matchingElements[i].innerHTML = (e.type === 'text') ? e.value : e[e.selectedIndex].text;

A fixed demo at jsFiddle