Question

我想要实现的是当有人从第1列下拉列表中选择任何选项时，它应该在第2列中搜索相应的选项并在第3列中显示其值。

例如，假设某人从第1列下拉列表中选择了值3，则在第3列中显示的相应值将为30。

我不知道如何实现这一点 - 有人能引导我一点吗？这是我到目前为止所做的：

$(document).ready(function () {
    $("tbody tr td:nth-of-type(1)").on('change blur input', function() {

    });
});

如果你愿意，这是我的JSFiddle。

Answer 1

您可以通过select在selectedIndex中获取所选项目的索引。假设this是select，您可以使用以下代码：

var index = this.selectedIndex;

然后，您可以使用jQuery的.eq()在其他option元素中找到正确的select，并使用text()

抓取文本

Here's a demo

$(document).ready(function () {
    $("tbody tr td:nth-of-type(1)").on('change', 'select',function (e) {
        var index = this.selectedIndex;
        var parentTd = $(this).closest('td');
        var nextTd = parentTd.next();
        var text = nextTd.find('select > option').eq(index-1).prop('selected','selected').text();
        nextTd.next().text(text);
    });
});

Answer 2

$(document).ready(function () {
    $("tbody tr td:nth-of-type(1) select").on("change", function () {
        var thistext = $(this).find(":selected").text().toLowerCase();
        var nexttext = $(this).closest("td").next().find("option[value='" + thistext + "']").text();
        $(this).closest("td").siblings().eq(1).text(nexttext);
    });
});

首先，您需要将处理程序放在<select>元素上，而不是<td>。

然后，为了在第二个菜单中找到相应的选项，我找到一个值等于所选选项中的小写文本的选项。然后我把它的文字放在第三栏。

如果那不是您想要的，也许您可以在问题中澄清您对相应选项的含义。

FIDDLE

在<select>标签中查找相应的值并显示</select>

2 个答案: