Question

我有一张类似这样的表

   <table>
    <tr>
        <td></td>
        <td>
            <select>
                <option>One</option>
                <option>Two</option>
            </select>
            <button class="makeStrng">+</button>
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <button class="addRow">Add ME</button>
        </td>
    </tr>
</table>

我正在尝试获取所选项目的文本并将其添加到输入框中。如果我再次点击加号（+），它应该在带有空格的选择框中再次添加字符串。

例如，如果我先选择 TWO 并点击文本框中的添加按钮，那么它应该再显示两个，如果我选择 ONE 它应该显示两个文本框。

我无法在此处使用ID，因为我为用户提供了多次添加此行的选项。

Fiddle

SCRIPT

$(document).ready(function () {
    $(document).on("click", ".addRow,.makeStrng", function () {
        var $class = $(this).attr("class");
        if ($class == "addRow") {
            var $row = $(this).closest("tr"); // Finds the closest row <tr>
            var prev = $row.prev();
            $(prev).after("<tr>" + prev.html() + "</tr>");
        }
        if ($class == "makeStrng") {
            //alert("MakeStrng");
            $class = $(this).closest("select");
            alert($($class + " option:selected").text());
        }

    });

});

提前致谢

Answer 1

你可以做到

＆＃13;

$(document).ready(function() {
  $(document).on("click", ".addRow,.makeStrng", function() {

    var $id = $(this).attr("id");
    var $class = $(this).attr("class");
    if ($class == "addRow") {
      var $row = $(this).closest("tr"); // Finds the closest row <tr>
      var prev = $row.prev();
      $(prev).after("<tr>" + prev.html() + "</tr>");
    }
    if ($class == "makeStrng") {
      //alert("MakeStrng");
      $class = $(this).closest("select");
      alert($($class + " option:selected").text());
    }

  });


  $(document).on("click", "button", function() {
    var $tr = $(this).closest('tr')
    $tr.find('input').val(function(i, val) {
      return (+val || 0) + (+$tr.find('select').val() || 0)
    })
  })

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td>
      <select>
        <option value="1">One</option>
        <option value="2">Two</option>
      </select>
      <button>+</button>
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <button class="addRow">Add ME</button>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

借助

提供的答案

@Arun

这是工作示例

Fiddle

<强> SCRIPT

$(document).ready(function () {
    $(document).on("click", ".addRow,.makeStrng", function () {
        var $class = $(this).attr("class");
        if ($class == "addRow") {
            var $row = $(this).closest("tr"); // Finds the closest row <tr>
            var prev = $row.prev();
            $(prev).after("<tr>" + prev.html() + "</tr>");
        }
        if ($class == "makeStrng") {
            var $tr = $(this).closest('tr')
            $tr.find('input').val(function (i, val) {
                return (val+" ") + ( $tr.find('select option:selected').text())
            });
        }

    });

});

<强> HTML

<table>
    <tr>
        <td></td>
        <td>
            <select>
                <option>One</option>
                <option>Two</option>
            </select>
            <button class="makeStrng">+</button>
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <button class="addRow">Add ME</button>
        </td>
    </tr>
</table>

希望对有些人有帮助:) 谢谢

如何在Jquery的列表视图中获取所选项的内容

2 个答案: