在我的代码中有三个select个元素（每个文件一个），每个元素有3个或4个选项。我在第一个文件的行上添加了一个Apply All按钮。
如果用户在第一个文件上选择工作表名称并单击Apply All按钮，则必须在所有文件上选择相同的工作表。如果任何文件上缺少工作表，则必须显示类似于＆＃34;不匹配工作表的警告＆＃34;。这是我试过的，
<form method="post" id="sheetForm" action="#"><input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="col-sm-12">
<div class="m-b-15">
</div>
</div>
</div>
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline">By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="select1" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2">Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="select2" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected">Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2" >2</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="select3" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1" >1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</form>
和相关的js代码看起来像，
$('#btnApplyAll').on('click', function(){
// get the selected option of first select
var noSuchOption = false;
var selectedOption = $('#select1').find(":selected").text();
var selects = $('select[name="sheet-select"]');
$('select[name="sheet-select"] option[selected="selected"]').removeAttr('selected');
$.each(selects, function(index, select) {
var opts = $(select).find('option').filter(function(){ return this.text == selectedOption;});
if(opts.length < 1) {
noSuchOption = true;
return false;
}
});
if(noSuchOption) {
notify_long("Selected sheet doesn't exists in all files!", 'danger');
} else {
$('select[name="sheet-select"] option').filter(function(){
return this.text == selectedOption;
}).attr('selected', true);
}
});
这段代码适用于3或4次按钮点击的初始阶段，但如果我在file1上选择sheet1，在file2上选择sheet2，在中间阶段选择file3上的sheet1，则无法更改。那时，在单选按钮之间切换也无法显示相关选项。
答案 0 :(得分：1)
这可以满足您的要求：
$('#btnApplyAll').on('click', function(){
var noSuchOption = false;
var selectedOption = null;
$('select.sheet-select').each(function(index) {
if (noSuchOption) return;
if (index == 0) {
selectedOption = $(this).val();
return;
}
if ($(this).find('option[value="' + selectedOption + '"]').length === 0) {
noSuchOption = true;
alert("File: "+$(this).parent().prev().val() +" have not selected sheet", 'danger');
return;
}
$(this).val(selectedOption);
})
});
function toggleOptions(e) {
var toggle = $(this).attr('id') == 'inlineRadio1' ? 'name' : 'index';
$('select.sheet-select option').hide()
$('select.sheet-select').each(function() {
let optsToShow = $(this).find('option[value^="'+ toggle +'"]');
optsToShow.show();
$(this).val(optsToShow.first().attr('value'));
});
}
$('#inlineRadio1, #inlineRadio2')
.change(toggleOptions)
.first().change(); // trigger change to initialize<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="sheetForm" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="select1" class="form-control input-small sheet-select" name="sheet-select-feb">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2">Sheet2</option>
<option value="index 2">2</option>
<option value="name 3">Sheet3</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="select2" class="form-control input-small sheet-select" name="sheet-select-jan">
<option value="name 1" selected="selected">Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2" >2</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="select3" class="form-control input-small sheet-select" name="sheet-select-mar">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</form>
答案 1 :(得分：1)
if(index==0) {
var player_name = $("#player_name");
if(player_name.val()!="") {
// proceed to next tab when next is clicked
}
else {
player_name.css({'border-color':'red'});
// DO NOT proceed to next tab
}
}
else if(index==1) {
var level = $("#level");
if(level.val()!="") {
// proceed to next tab
}
else {
level.css({'border-color':'red'});
// DO NOT proceed to next tab
}
}
$(document).ready(function() {
// Default select mode of sheet
$(".rdoSelection[value='byName']").prop("checked", true);
function selectCheckboxstatus() {
var selectionMode;
$(".clsDdPosition").prop("selectedIndex", 0);
$(".clsDdName").prop("selectedIndex", 0);
selectionMode = $(".rdoSelection:checked").val();
if ("byName" === selectionMode) {
$(".clsDdPosition").hide();
$(".clsDdName").show();
} else if ("byPosition" === selectionMode) {
$(".clsDdPosition").show();
$(".clsDdName").hide();
}
}
selectCheckboxstatus();
$(".rdoSelection").on("click", function(e) {
selectCheckboxstatus();
});
$(".btnApplyAll").on("click", function(e) {
var selectedValue, selectedClass, ddSelectionMode;
ddSelectionMode = $(".rdoSelection:checked").val(); if ("byName" === ddSelectionMode) {
selectedValue = $("#ddSheetByName1").val();
selectedClass = ".clsDdName";
} else if ("byPosition" === ddSelectionMode) {
selectedValue = $("#ddSheetByPosition1").val();
selectedClass = ".clsDdPosition";
}
$(selectedClass).each(function() {
$(this).val(selectedValue);
});
});
});