Question

假设我有一个下拉列表（或组合框）并且它有列表。一旦我从列表中选择了一个，它就会自动添加到表中。我该怎么办？可能它只是HTML / JS？

下拉：

<select class="combobox form-control" style="display: none;">
    <option value="" selected="selected">Point Guard</option>
    <option value="CP3">Chris Paul (93)</option>
 </select>

表：

<table class="table">
    <thead>
      <tr>
        <th>Position</th>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
      </tr>
    </tbody>
</table>

感谢。

Answer 1

使用jQuery：

$('.combobox').change(function(e) {

   var selectedVal = $(this).val();
   $('.table').append('<tr><td>' + selectedVal + '</td></tr>');

});

我希望你明白这一点。

Answer 2

请尝试使用以下代码段。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".combobox").change(function () {
                var temp1 = $(".combobox option:selected").text().split(' ');
                $('.table tr:last').after('<tr><td>' + $('.table tr').length + '</td><td>' + temp1[0] + '</td><td>' + temp1[1] + '</td></tr>');
            });
        });

        function removeItem() {
            $('.table tbody tr:first').remove();
            //.eq() -- You can also use this to fetch nth row
        }
    </script>
</head>
<body>
    <select class="combobox form-control">
        <option value="" selected="selected">Point Guard</option>
        <option value="CP3">Chris Paul (93)</option>
    </select>
    <button onclick="removeItem()">Remove First Row</button>
    <table class="table">
        <thead>
            <tr>
                <th>Position</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
            </tr>
        </tbody>
    </table>


</body>
</html>

将项添加到表 - HTML / CSS / JS

2 个答案: