javascript - 当下拉列表中的 "select"发生变化时，按 ID 填充表 TD-6ren

javascript - 当下拉列表中的 "select"发生变化时，按 ID 填充表 TD

转载作者：可可西里更新时间：2023-11-01 14:54:27

28

4

我的任务是创建一个动态表，用于在表中比较不同经纪人的服务。鉴于网站规模和客户要求，当用户从 thanle 标题的下拉菜单中进行选择时，我需要能够更改为表 td 的内容。

我已经用我放在一起的最新版本更新了下面的代码。

我需要帮助的任务是:

脚本只监听 col2
如何将图像添加到阵列博客？
默认情况下每列 eq Broker 1、Broker 2、Broker 3 加载下拉列表中的一项

表格

<html>
<head>
<title>Comparison Chart Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<table class="zebra" size="100%" border="1">
<thead>
<tr>
    <th class="center">Broker Vergleichsliste</th>
    <th>
        <select class="col2 selectBroker">
            <option>Broker 1</option>
            <option>Broker 2</option>
            <option>Broker 3</option>
            <option>Broker 4</option>
            <option>Broker 5</option>
        </select>
    </th>
    <th>
        <select class="col3 selectBroker">
            <option>Broker 1</option>
            <option>Broker 2</option>
            <option>Broker 3</option>
            <option>Broker 4</option>
            <option>Broker 5</option>
        </select>
    </th>
    <th>
        <select class="col4 selectBroker">
            <option>Broker 1</option>
            <option>Broker 2</option>
            <option>Broker 3</option>
            <option>Broker 4</option>
            <option>Broker 5</option>>
        </select>
    </th>
 </tr>
</thead>
<tbody>
<tr>
    <td><strong>Broker</strong></td>
    <td class="col2 blogo"></td>
    <td class="col3 blogo"></td>
    <td class="col4 blogo"></td>
</tr>
<tr>
    <td><strong>Reguliert</strong></td>
    <td class="col2 regulated"></td>
    <td class="col3 regulated"></td>
    <td class="col4 regulated"></td>
</tr>
<tr>
    <td><strong>securityicherheit</strong></td>
    <td class="col2 security"></td>
    <td class="col3 security"></td>
    <td class="col4 security"></td>
</tr>
  <tr>
    <td><strong>Verrechnungskonto</strong></td>
    <td class="col2 account"></td>
    <td class="col3 account"></td>
    <td class="col4 account"></td>
  </tr>
  <tr>
    <td><strong>Mindesteinlage</strong></td>
    <td class="col2 deposit"></td>
    <td class="col3 deposit"></td>
    <td class="col4 deposit"></td>
  </tr>
  <tr>
    <td><strong>Software</strong></td>
    <td class="col2 software"></td>
    <td class="col3 software"></td>
    <td class="col4 software"></td>
  </tr>
  <tr>
    <td><strong>Handelseinheit</strong></td>
    <td class="col2 einheit"></td>
    <td class="col3 einheit"></td>
    <td class="col4 einheit"></td>
  </tr>
  <tr>
    <td><strong>Margin Forex</strong></td>
    <td class="col2 margin"></td>
    <td class="col3 margin"></td>
    <td class="col4 margin"></td>
  </tr>
  <tr>
    <td><strong>Kommission pro Halfturn</strong></td>
    <td class="col2 comission"></td>
    <td class="col3 comission"></td>
    <td class="col4 comission"></td>
  </tr>
  <tr>
    <td><strong>Spreads</strong></td>
    <td class="col2 spread"></td>
    <td class="col3 spread"></td>
    <td class="col4 spread"></td>
  </tr>
  <tr>
    <td><strong>Finanzierungskosten</strong></td>
    <td class="col2 fcost"></td>
    <td class="col3 fcost"></td>
    <td class="col4 fcost"></td>
  </tr>
  <tr>
    <td><strong>Orderarten</strong></td>
    <td class="col2 orders"></td>
    <td class="col3 orders"></td>
    <td class="col4 orders"></td>
  </tr>
  <tr>
    <td><strong>Telefonhandel</strong></td>
    <td class="col2 phone"></td>
    <td class="col3 phone"></td>
    <td class="col4 phone"></td>
  </tr>
  <tr>
    <td><strong>Mobile Trading</strong></td>
    <td class="col2 mobile"></td>
    <td class="col3 mobile"></td>
    <td class="col4 mobile"></td>
  </tr>
  <tr>
    <td><strong>Produktpalette</strong></td>
    <td class="col2 products"></td>
    <td class="col3 products"></td>
    <td class="col4 products"></td>
  </tr>
  <tr>
    <td><strong>Besonderheiten</strong></td>
    <td class="col2 special"></td>
    <td class="col3 special"></td>
    <td class="col4 special"></td>
  </tr>
  <tr>
    <td><strong>ECN / MM / STP / DMA</strong></td>
    <td class="col2 art"></td>
    <td class="col3 art"></td>
    <td class="col4 art"></td>
  </tr>
  <tr>
    <td><strong>Fazit</strong></td>
    <td class="col2 fazit"></td>
    <td class="col3 fazit"></td>
    <td class="col4 fazit"></td>
  </tr>
  <tr>
    <td><strong>Zur Webseite</strong></td>
    <td class="center"><a href="/goto/forex/" target="_blank" class="button-more">Konto eröffnen</a></td>
    <td class="center"><a href="#" target="_blank" class="button-more">Konto eröffnen</a></td>
    <td class="center"><a href="#" target="_blank" class="button-more">Konto eröffnen</a></td>
  </tr>
  </tbody>
</table>
</body>

JS

<script language="JavaScript">
var data = {
"brokers":
    {
    "broker": [
        {
        "name": "Broker 1",
        "blogo": "Broker1 Logo",
        "regulated": "YES",
        "security": "Mindep",
        "account": "Konto",
        "deposit": "Einlage",
        "software": "Software",
        "einheit": "H Einheit",
        "margin": "100:1",
        "comission": "Komission",
        "spread": "Spreads",
        "fcost": "F Kosten",
        "orders": "Orderarten",
        "phone": "YES/No",
        "mobile": "Yes/No",
        "products": "Products",
        "special": "Besonderheiten",
        "art": "MM/DMA",
        "fazit": "Fazit"
        },
    {
        "name": "Broker 2",
        "blogo": "Broker2 Logo",
        "regulated": "NO",
        "security": "Mindep",
        "account": "Konto",
        "deposit": "Einlage",
        "software": "Software",
        "einheit": "H Einheit",
        "margin": "200:1",
        "comission": "Komission",
        "spread": "Spreads",
        "fcost": "F Kosten",
        "orders": "Orderarten",
        "phone": "YES",
        "mobile": "Yes/No",
        "products": "Products",
        "special": "Besonderheiten",
        "art": "DMA/STP",
        "fazit": "Fazit"
        },
    {
        "name": "Broker 3",
        "blogo": "Broker3 Logo",
        "regulated": "YES",
        "security": "Mindep",
        "account": "Konto",
        "deposit": "Einlage",
        "software": "Software",
        "einheit": "H Einheit",
        "margin": "Forex margin",
        "comission": "Komission",
        "spread": "Spreads",
        "fcost": "F Kosten",
        "orders": "Orderarten",
        "phone": "NO",
        "mobile": "Yes/No",
        "products": "Products",
        "special": "Besonderheiten",
        "art": "ECN/MM/DMA",
        "fazit": "Fazit"
        },
    {
        "name": "Broker 4",
        "blogo": "Broker4 Logo",
        "regulated": "NO",
        "security": "Mindep",
        "account": "Konto",
        "deposit": "Einlage",
        "software": "Software",
        "einheit": "H Einheit",
        "margin": "Forex margin",
        "comission": "Komission",
        "spread": "Spreads",
        "fcost": "F Kosten",
        "orders": "Orderarten",
        "phone": "Green Tick",
        "mobile": "Yes/No",
        "products": "Products",
        "special": "Besonderheiten",
        "art": "MM/DMA",
        "fazit": "Fazit"
        },
    {
        "name": "Broker 5",
        "blogo": "Broker5 Logo",
        "regulated": "YES",
        "security": "Mindep",
        "account": "Konto",
        "deposit": "Einlage",
        "software": "Software",
        "einheit": "H Einheit",
        "margin": "Forex margin",
        "comission": "Komission",
        "spread": "Spreads",
        "fcost": "F Kosten",
        "mobile": "Yes/No",
        "products": "Products",
        "special": "Besonderheiten",
        "art": "ECN/STP",
        "fazit": "Fazit"
        }
    ]}
}

$(".selectBroker").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
    whichCol = "col2";
}
$.each(data.brokers.broker, function(i, v) {
    if (v.name == jthis.val()) {
        $("td." + whichCol + ".name").html(v.name);
        $("td." + whichCol + ".blogo").html(v.blogo);
        $("td." + whichCol + ".regulated").html(v.regulated);
        $("td." + whichCol + ".security").html(v.security);
        $("td." + whichCol + ".account").html(v.account);
        $("td." + whichCol + ".deposit").html(v.deposit);
        $("td." + whichCol + ".software").html(v.software);
        $("td." + whichCol + ".einheit").html(v.einheit);
        $("td." + whichCol + ".margin").html(v.margin);
        $("td." + whichCol + ".comission").html(v.comission);
        $("td." + whichCol + ".spread").html(v.spread);
        $("td." + whichCol + ".fcost").html(v.fcost);
        $("td." + whichCol + ".orders").html(v.orders);
        $("td." + whichCol + ".phone").html(v.phone);
        $("td." + whichCol + ".mobile").html(v.mobile);
        $("td." + whichCol + ".products").html(v.products);
        $("td." + whichCol + ".special").html(v.special);
        $("td." + whichCol + ".art").html(v.art);
        $("td." + whichCol + ".fazit").html(v.fazit);
        return;
    }
});

});
</script>
</html>

最佳答案

查看此 jsfiddle .您当然需要扩展它才能完成代码。可能有更好的方法可以做到这一点，但它确实有效，而且我在几分钟内就搞定了。

HTML

<table class="table table-bordered table-striped">
    <tr>
        <th>
            <select class="col1 selectBroker">
                <option>Broker 1</option>
                <option>Broker 2</option>
                <option>Broker 3</option>
            </select>
        </th>
        <th>
            <select class="col2 selectBroker">
                <option>Broker 1</option>
                <option>Broker 2</option>
                <option>Broker 3</option>
            </select>
        </th>
        <th>
            <select class="col3 selectBroker">
                <option>Broker 1</option>
                <option>Broker 2</option>
                <option>Broker 3</option>
            </select>
        </th>
    </tr>
    <tr>
        <td class="col1 isTotallyAwesome"></td>
        <td class="col2 isTotallyAwesome"></td>
        <td class="col3 isTotallyAwesome"></td>
    </tr>
    <tr>
        <td class="col1 foo"></td>
        <td class="col2 foo"></td>
        <td class="col3 foo"></td>
    </tr>
</table>

JS

var data = {
    "brokers":
        {
        "broker": [
            {
            "name": "Broker 1",
            "isTotallyAwesome": "yes",
            "foo": "no"},
        {
            "name": "Broker 2",
            "isTotallyAwesome": "no",
            "foo": "yes"},
        {
            "name": "Broker 3",
            "isTotallyAwesome": "true",
            "foo": "no"}
        ]}
}

$(".selectBroker").change(function() {
    var jthis = $(this);
    var whichCol;
    if (jthis.hasClass("col1")) {
        whichCol = "col1";
    }
    $.each(data.brokers.broker, function(i, v) {
        if (v.name == jthis.val()) {
            $("td." + whichCol + ".isTotallyAwesome").html(v.isTotallyAwesome);
            $("td." + whichCol + ".foo").html(v.foo);
            return;
        }
    });

});

关于javascript - 当下拉列表中的 "select"发生变化时，按 ID 填充表 TD，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12815485/

28

4

0

文章推荐： javascript - 使用鼠标指针简单地交换水平和垂直滚动

文章推荐： java - JobControl 和 JofConf.setMapperClass() 错误

文章推荐： c++ - 如何为 native C++(非托管)开发配置 Visual Studio？

文章推荐： hadoop - 在一列上选择不同但返回所有列

javascript - react JSX : selecting "selected" on selected
我试图通过用空格填充文本来创建下拉列表中的列效果，如下例所示: [Aux1+1] [*] [Aux1+1] [@Tn=PP] [Main] [*] [Main A
select - JPA - MAX of COUNT 或 SELECT FROM SELECT
我为 MySQL 编写了以下查询: SELECT subquery.t1_column1, subquery.t2_id, MAX(subquery.val) FROM ( S
jquery - 为什么我们用 select 标签编写 .attr ('selected' ,'selected' )
为什么我们要用 select 标签来编写.attr('selected','selected') 例如: $('#countryList option').filter(function () {
select - "selected"选项上的标签在选择具有FormControlname时不起作用
Lokalizacja: Gdańsk Rzeszów Wrocław 不知道发生了什么，但在那种情况下没有选择的选项，我必须从列表中选择一些东西。当我从选
jquery - removeAttr ("selected") 和 .attr ('selected' ,'selected' ) 无法正常工作
我的表单中有两个选择字段。第一个是单选，另一个是多选。现在我想做的是根据单选中所选的选项，使用给定的数据选择多选中的选项。为此，我在单选更改时触发 ajax 请求: $.ajax({ type
select - Firefox 5 在页面刷新时不使用 select ="selected"值，保留旧值
我在 Firefox 5 中发现了一个奇怪的错误(我现在无法访问 4)。但是，我认为它可能在 Firefox 4 中工作，因为我刚买了一台新电脑，而且我不记得以前见过这个错误。我有几个选择框。所选值
MySQL: select * from table 和 select * from (select* from table) 的区别
此 SQL 有何不同: 第一个: select * from table_1 a join table_2 b on a.id = b.acc_id 第二个: select * f
html - HTML <选项> : selected VS selected ="selected" 的最佳实践
预选的最佳做法是什么？在？根据不同的网站，两者都有效。但是哪个更好呢？最兼容？ Foo Bar 最佳答案如果您正在编写 XHTML，则 selected="selected" 是必需的。如
javascript - Angular JS : "Select All" options of "multi-select select box"
我使用 Angular JS 创建了一个多选选择框:下面是相同的代码: JS: $scope.foobars = [{ 'foobar_id': 'foobar01', 'name':
select - 在列上使用 defaultValue 属性(但不是
我正在编写一个小脚本来测试表单在提交之前是否已被更改。所以我可以使用普通输入(文本、文本区域等): if(element.defaultValue != element.value) { al
javascript - 将选项从 - 选项 select 属性被破坏了吗？
我正在尝试为 Prototype 编写一个插件，用户在其中单击下拉菜单并将其替换为多选元素。我快完成了。在用户选择他们想要显示的内容并将表单提交到同一页面之前，一切都很好。我正在使用 PHP 来使用
Mongodb select with condition is selected result must in sub select query
你如何在 MongoDB 中进行嵌套选择，类似于 SELECT id FROM table1 WHERE id IN (SELECT id FROM table2) 最佳答案 MongoDB 尚不具备
Angular 2 : Select dropdown not selecting option despite "selected" attribute
我有以下用于选择下拉列表的代码: {{unit.Text}} UnitOfMeasurements 数组中的每一项看起来像这样: Selected: false Text: "lb" Va
Use [ngValue] and [selected] in select tag(在选择标记中使用[ngValue]和[selected])
我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因，它们似乎无法相提并论。。示例代码：。这段代码最终只显示空白作为缺省值。如果删除[ngValue]，它就

首页

博学

6Ren·AI

商城

javascript - 当下拉列表中的 "select"发生变化时，按 ID 填充表 TD