Question

我有一个像这样的表结构

Fruit         Price        Qty
Apple          30          10
Orange         20          20
Grapes         12          10
pineapple      10           5

现在当我从这个表中选择任何一行时，我想在select下拉列表中预先设置相应的值。

例如，如果我从表中选择Apple，我需要在select语句中的表中预先设置所选行的相应值，即Fruit = Apple，Price = 30和{{ 1}}在我对应的select语句中。

我该怎么做？

Answer 1

<强> DEMO HERE

假设你的html如下：

    <table class="fruits">
    <thead>
        <th>Fruit</th>
        <th>Price</th>
        <th>Qty</th>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>30</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>20</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Grapes</td>
            <td>12</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Pineapple</td>
            <td>10</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

<强> JS

$('.fruits tr').on('click',function(){
    var fruit = $(this).find('td:first-child').text().trim();
    var price=$(this).find('td:nth-child(2)').text().trim();
    var qty=$(this).find('td:last-child').text().trim();
    alert("Fruit =" + fruit+", Price =" + price +", Qty = "+qty);

    //Can use those values and pass as parameter to your select statement
});

Answer 2

你的问题对你的最终结果有点模糊。我假设您希望通过标记HTML和JQuery来填充HTML或文本框的一些时间。这是一个半实现服务的工作示例，它从数据库中获取数量/价格，并填充文本框。

PHP页面：

<?php

$db = new mysqli(/* connect info here*/);


$result = $db->query("SELECT * FROM `fruits` WHERE `fruit` = " . $db->escape_string($_GET['fruit']));

if ( !$result )
    echo json_encode(false);
else
    echo json_encode($result->fetch_assoc());

?>

HTML / Javascript页面：

$(document).ready(function() {
    $('select[name="fruit"]').change(function(e) {
        $.ajax({
            url: 'getfruits.php',
            data: {
                'fruit': $(this).val()
            },
            success: function(res) {
                if ( !res ) {
                    return false;
                }

                $('input[name="price"]').val(res.price);
                $('input[name="qty"]').val(res.qty);

            }
        });
    });
});

Here是html / javascript部分的jsfiddle。请注意这不起作用，因为没有附加php脚本。

Answer 3

试试这个

＆＃13;

$(function() {
  $('tr').click(function() {
    var sid = 0;
    $(this).find('td').each(function() {
      sid++;
      $('#s' + sid).val($(this).text());
    });
  });
});

＆＃13;

table {
  border-collapse: collapse;
}
tr,
td {
  border: 1px solid grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Fruit</td>
    <td>Price</td>
    <td>Qty</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>30</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>20</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>12</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Pineapple</td>
    <td>10</td>
    <td>5</td>
  </tr>
</table>
<br/>Fruit:
<select id="s1">
  <option>--Select--</option>
  <option>Apple</option>
  <option>Orange</option>
  <option>Grapes</option>
  <option>Pineapple</option>
</select>
<br/>Price:
<select id="s2">
  <option>--Select--</option>
  <option>30</option>
  <option>20</option>
  <option>12</option>
  <option>10</option>
</select>
<br/>Qty:
<select id="s3">
  <option>--Select--</option>
  <option>10</option>
  <option>20</option>
  <option>10</option>
  <option>5</option>
</select>

＆＃13;

使用选定的表行预填充选择下拉列表

3 个答案: