Change text to show currently selected item in the select

Question

I would like to change the appropriate line when a change has been done on a select.

I have something like that :

<table>
<tr>
    <td>
        <select id="ListeElement" name ="ListeElement" onchange="changeLabel(this)"> 
           <option value="Option 1">Option 1</option> 
           <option value="Option 2">Option 2</option>
        </select> 
    </td>
    <td>
        <span id="labelElement" name="labelElement" onchange="changeLabel(this)">option</span>
    </td>
</tr>
<tr>
    <td>
        <select id="ListeElement" name="ListeElement" onchange="changeLabel();"> 
           <option value="Option 1">Option 1</option> 
           <option value="Option 2">Option 2</option>
        </select> 
    </td>
    <td>
        <span id="labelElement" name="labelElement" onchange="changeLabel()">option</span>
    </td>
</tr>

jsfiddle.net

So if I change the first select I would like to change my first label with the value selected.

I know that an ID is unique but I can't change my html code.

I can only add JavaScript method.

Thx

What do you want to happen when the select changes? Do you want the text in the first row td and the second row td to change? Or just one of those? — OliverRadini, Nov 23 '15 at 11:37
You can't have proper markup? Having duplicate IDs is preposterous. If you can use JS then I suggest you change the IDs with `var id = document.querySelector('select'); id.setAttribute('id', 'UNIQUEID');` — zer00ne, Nov 23 '15 at 11:48
Having same ID for multiple tags is a wrong way of coding. In a larger application, you might end up realizing that you have messed up. And correcting that would be frustrating. Just a suggestion. — Ajit Kumar Singh, Nov 23 '15 at 12:11
Not all option has value option 1 that was my mistake sry, I know that is really wrong to duplicate ID but I can't change it even with javascript. because It can break all the logic behind it. — stix, Nov 23 '15 at 12:40

score 1 · Accepted Answer · edited May 23 '17 at 12:07

It seems like you're essentially asking for a way to find the closest element that matches a selector. Take a look at this answer, which provides a function for exactly that.

Working solution (note that I changed the value attributes of the option objects to different values so that you can see the change):

function changeLabel(that){
    closest(that, "#labelElement").innerHTML = that.options[that.selectedIndex].value;
}

function closest(el, sel) {
    if (el != null)
        return el.matches(sel) ? el 
            : (el.querySelector(sel) 
                || closest(el.parentNode, sel));
}

<table>
    <tr>
        <td>
            <select id="ListeElement" name ="ListeElement" onchange="changeLabel(this)"> 
               <option value="Option 1">Option 1</option> 
               <option value="Option 2">Option 2</option>
            </select> 
        </td>
        <td>
            <span id="labelElement">option</span>
        </td>
    </tr>
    <tr>
        <td>
            <select id="ListeElement"> 
               <option value="Option 1">Option 1</option> 
               <option value="Option 2">Option 2</option>
            </select> 
        </td>
        <td>
            <span id="labelElement">option</span>
        </td>
    </tr>
</table>

Thx for your reply but it doesn't work with IE. object doesn't support this property or method match — stix, Nov 23 '15 at 12:45
Take a look at the question I linked, it mentions that matches is not supported by IE, and provides a polyfill you can use. — cmpxchg8b, Nov 23 '15 at 13:53

Change text to show currently selected item in the select

1 Answers1