在数据表jQuery中获取组合框值

时间:2018-10-16 17:25:46

标签: jquery html5 datatables

例如我有这样的表配置

id |名称|统计信息

其中 stats 是组合框,具有2个选项

<select name="yourOpt">
<option value="0">Not Active</option>
<option value="1">Active</option>
</select>

例如我的数据是:

1 | David | Active
2 | James | Not Active

如何从该组合框中获取数据1的“活动”值1以及获取数据2的“非活动”值?

感谢之前

3 个答案:

答案 0 :(得分:0)

我希望这能回答您的问题。

$( "select[name='yourOpt']" ).change(function() { var selected = $('select').val() });

我将在输入中添加id,以便其更加集中

答案 1 :(得分:0)

  

$(“ select [name ='yourOpt']”)).change(function(){   console.log($(this).Val())});

答案 2 :(得分:0)

由于您尚未指定要从组合框中获取值的时间(例如,在选择一个选项之后-如其他答案中所述),我将发布一个解决方案,让您获取连续的组合框,由其在表主体中的索引指定。

代码使用jQuery和Javascript。

function getSelectedOptionInRow(index){
    let selector = "tbody tr:nth-child(" + (index+1) + ") select option:selected";
    return $(selector).val();
}

您可以按以下方式使用此功能。

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>name</td>
        <td>stats</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>David</td>
        <td>
          <select name="yourOpt">
            <option value="0">Not Active</option>
            <option value="1">Active</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>James</td>
        <td>
          <select name="yourOpt">
            <option value="0">Not Active</option>
            <option value="1">Active</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>

  <button onclick="btnClicked()">Click</button>

  <script>

    // Action when button is clicked
    function btnClicked() {
      printAll();
    }

    // Helper function to get the options
    // in all the rows
    function printAll() {
      let selector = "tbody tr"
      let options = [];
      $(selector).each(function(i) {
        options.push(getSelectedOptionInRow(i));
      });
      alert(options.join(" "));
    }

    // Function to obtain the selected id
    // of the 'yourOpt' combobox.
    function getSelectedOptionInRow(index) {
      let selector = "tbody tr:nth-child(" + (index + 1) + ") select option:selected";
      return $(selector).val();
    }

  </script>
</body>

</html>