如何在表格下拉列表中填充未选择的下拉选项?以及如何获取阵列控制台中的所有值?
我试过了,但我对此一点也不挣扎
Note: Un-selected options only shown in table dropdown lists
这是我的示例代码..
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>
Note: Un-selected options only shown in table dropdown lists
谢谢
最佳答案
几乎没有错误。
变更列表:
删除抛出未定义错误的 i++
更正了拼写错误
form
而不是from
添加了创建行时的选项。
在html和js中添加选项值
使用字符串文字创建行模板
根据值隐藏选项。
工作 fiddle :
https://jsfiddle.net/7yofb9u1/
新 fiddle :
(当 dropdown-1 最初有一个值然后在 add row
上)
https://jsfiddle.net/oy30pL81/
注意:您为每一行下拉列表使用相同的 ID。您可以为每个下拉菜单创建唯一的 ID,而不是使用 dropdown2
和/或添加一个类来为 jquery 选择器选择框。
关于javascript - 如何将未选择的值从一个下拉列表填充到表中的另一个下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58462298/