Question

我想在选择中进行更改后更改相应的行。

我有类似的东西：

<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

因此，如果我更改第一个选择，我想用选定的值更改我的第一个标签。

我知道ID是唯一的，但我无法更改我的HTML代码。

我只能添加JavaScript方法。

THX

Answer 1

看起来您实际上是在寻找一种方法来找到与选择器匹配的最接近的元素。看看this回答，它提供了一个功能。

工作解决方案（请注意，我将选项对象的值属性更改为不同的值，以便您可以看到更改）：

＆＃13;

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));
}

＆＃13;

<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>

＆＃13;

更改文本以在选择中显示当前选定的项目

1 个答案: