时间戳

首页 > 解决方案 > 如何将未选择的值填充到表中的另一个下拉列表中？

javascript - 如何将未选择的值填充到表中的另一个下拉列表中？

问题描述

如何在表格下拉列表中填充未选择的下拉选项？以及如何在数组控制台中获取所有值？

我试过了，但我对此有点挣扎

注意：未选择的选项仅显示在表格下拉列表中

这是我的示例代码..

小提琴在这里..

var status;
var sno = [];
var load;
var no_rows = 0;
var row;
var mainArr = [];
var tmpArr = [];

function loadValues() {
  var mainTable = $('#tablemain');
  var tr = mainTable.find('tbody tr');
  console.log(tr.length)
  tr.each(function() {
    tmpArr = [];
    $(this).find('td').each(function() {

      var values = $(this).find('input, select').val();
      tmpArr.push(values);

    });
    mainArr.push(tmpArr);
  });
  console.log(mainArr);
}


$(document).ready(function() {
  $(".add-row").click(function() {
    row = "<tr id=tasklist><td>" + "<input type=text class=sno></input>" + "</td><td>" + "<input type=text class=pname></input>" + "</td><td>" + "<input type=text class=task></input>" + "</td><td>" + "<input type=text class=date></input>" + "</td><td>" + "<select class=status id=dropdown2 name=dropdown2><option >Not Started</option></select>" + "</td><td>" + "<input type=text class=comment></input>" + "</td></tr>";
    $("table > tbody").append(row);
    $('.date').datepicker();
    //  $('.sno').css("background-color","blue");  
    $("select").change(function() {
      status = $(this).find('option:selected').text();
      if (status === "In progress") {
        $(this).css("background-color", "#a1a1ff");
        //$('.task').addClass("blue");
      }
      if (status === "Finished") {
        $(this).css("background-color", "#54c654");
        //$('.task').addClass("green");
      }
      if (status === "Not Started") {
        $(this).css("background-color", "#F8F8F8");
        //$('.task').addClass("white");
      }
    })
    i++;
  });

  $('.load').click(function() {
    loadValues();
  });
});

$('select[name=dropdown1]').on('change', function() {
  $("select[name=dropdown2]").find('option').show();
  var from = $(this).find(":selected").val();
  $("select[name=dropdown2]").val('');
  if (form != "") {
    $("select[name=dropdown2]").find('option:contains("' + form + '")').hide();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> First Dropdown:
  <select class="status" id="dropdown1" name="dropdown1">
    <option>Not Started</option>
    <option>In progress</option>
    <option>Finished</option>
  </select>
</div>
<div>
  <form>
    <input type="button" class="add-row" value="Add Row">
    <input type="button" class="load" value="Enter">
  </form>
  <table id='tablemain' class="table">
    <thead>
      <tr>
        <th>SNo</th>
        <th>Name</th>
        <th>Assigned Task</th>
        <th>Due Date</th>
        <th>Status</th>
        <th>Comments</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

注意：未选择的选项仅显示在表格下拉列表中

谢谢

标签： javascriptjqueryhtml

解决方案

几乎没有错误。

变更清单：

  1. 删除引发错误未定义的 i++

  2. 改正form错字from

  3. 创建行时添加了选项。

  4. 在 html 和 js 中添加选项值

  5. 使用字符串文字创建行模板

  6. 根据值隐藏选项。

工作小提琴：

https://jsfiddle.net/7yofb9u1/

新小提琴：

（当 dropdown-1 最初有一个值时，然后 on add row）

https://jsfiddle.net/oy30pL81/

注意：您为每一行下拉菜单使用相同的 id。您可以为每个下拉菜单创建唯一的 id，而不使用dropdown2和/或添加一个类来选择 jquery 选择器的框。

推荐阅读