我有三个引导选项卡，每个选项卡都有表单字段，如果我转到其他选项卡，那么我想清除最后一个选项卡上的字段（如果它们已填充）。 例如： 如果我在共享空间选项卡上并填写表单字段，那么当我切换到其他私有空间或会议室选项卡时，共享空间字段应该清除。
这是我的view.blade.php文件
<div class="form-group">
Space Type:
<select class="select-tabs" onchange="doChange()" id='spaceType' name="spaceType" data-toggle="dropdown">
<option disabled>Select</option>
<option data-target="#sharedSpace" {{$list->spaceType == "shared space" ? "selected" : false}} value = "shared space">Shared Space</option>
<option data-target="#privateSpace" {{$list->spaceType == "private space" ? "selected" : false}} value = "private space">Private Space</option>
<option data-target="#meetingRoom" {{$list->spaceType == "meeting room" ? "selected" : false}} value = "meeting room">Meeting Room</option>
</select>
</div>
<div class="tab-content">
<div id="sharedSpace" class="tab-pane">
<div>
{{Form::label('totalSeats', 'Total Seats: ')}}
{{Form::text('totalSeats', $list->totalSeats, ['class' => 'form-control', 'placeholder' => 'e.g: Rs. 10000', 'type' => 'number'])}}
<br>
<div id="textArea-fields" class="form-group">
<label id="labelTwo" for="description">Description</label>
<textarea class="form-control" id="description" name="description" placeholder="write here...">{{(isset($list->description)) ? $list->description : ""}}</textarea>
</div>
<h1>Features</h1>
</div>
</div>
<div id="privateSpace" class="tab-pane">
<div>
{{Form::label('totalOffices', 'Total Offices: ')}}
{{Form::text('totalOffices', $list->totalOffices, ['class' => 'form-control', 'placeholder' => 'e.g: Rs. 10000', 'type' => 'number'])}}
<br>
{{Form::label('availableOffices', 'Available Offices: ')}}
{{Form::text('availableOffices', $list->availableOffices, ['class' => 'form-control', 'placeholder' => 'e.g: Rs. 10000', 'type' => 'number'])}}
<br>
<div id="textArea-fields" class="form-group">
<label id="labelTwo" for="description">Description</label>
<textarea class="form-control" id="description" name="description" placeholder="write here...">{{(isset($list->description)) ? $list->description : ""}}</textarea>
</div>
</div>
<div>
<h1>Features</h1>
{{Form::checkbox('feature[5]', 'whiteBoard', (array_key_exists(5, $list->feature)) ? true : false)}}
{{Form::label('whiteBoard', 'White board')}}
<br>
{{Form::checkbox('feature[6]', 'cabinets/lockers', (array_key_exists(6, $list->feature))? true : false)}}
{{Form::label('cabinets/lockers', 'Cabinets/Lockers')}}
</div>
</div>
<div id="meetingRoom" class="tab-pane">
<div>
{{Form::label('totalRooms', 'Total Rooms: ')}}
{{Form::text('totalRooms', $list->totalRooms, ['class' => 'form-control', 'placeholder' => 'e.g: Rs. 10000', 'type' => 'number'])}}
<br>
<div id="textArea-fields" class="form-group">
<label id="labelTwo" for="description">Description</label>
<textarea class="form-control" id="description" name="description" placeholder="write here...">{{(isset($list->description)) ? $list->description : ""}}</textarea>
</div>
</div>
<div>
<h1>Features</h1>
{{Form::checkbox('feature[0]', 'videoConference', (array_key_exists(0, $list->feature)) ? true : false)}}
{{Form::label('videoConference', 'Video conference')}}
<br>
{{Form::checkbox('feature[1]', 'projector', (array_key_exists(1, $list->feature))? true : false)}}
{{Form::label('projector', 'Projector')}}
<br>
{{Form::checkbox('feature[2]', 'whiteBoard', (array_key_exists(2, $list->feature)) ? true : false)}}
{{Form::label('whiteBoard', 'White board')}}
<br>
{{Form::checkbox('feature[3]', 'micFacility', (array_key_exists(3, $list->feature)) ? true : false)}}
{{Form::label('micFacility', 'Mic facility')}}
<br>
{{Form::checkbox('feature[4]', 'conferenceTable', (array_key_exists(4, $list->feature)) ? true : false)}}
{{Form::label('conferenceTable', 'Conference table')}}
</div>
</div>
</div>
这里是用于更改标签的edit.js文件：
$(document).ready(function () {
var something = document.getElementById("spaceType");
var val = something.options[something.selectedIndex].value;
if (val == 'private space') {
$(':selected', this).tab('show');
}
if (val == 'meeting room') {
$(':selected', this).tab('show');
}
if (val == 'private space') {
$(':selected', this).tab('show');
}
$(".select-tabs").on('change', function () {
$(':selected', this).tab('show');
});
});
答案 0 :(得分：0)
您可以使用jQuery UI执行此操作，我们只需找到带ID的选择器。
如果您认为这对您有用，那么您可以按如下方式使用jQuery：
$('#spaceType').on('change', function(e){
console.log(e);
var space_type = e.target.value; //we get the value of the select so we can compare it later
//You can add as many switch cases as you want to make it work
switch(space_type) { //depending on selection then you'll call a function to clear the div.
case "private space":
clearForm($("#sharedSpace"));
clearForm($("#meetingRoom"));
break;
case "meeting room":
clearForm($("#privateSpace"));
clearForm($("#sharedSpace"));
break;
default:
clearForm($("#privateSpace"));
clearForm($("#meetingRoom"));
}
function clearForm($form) {
$form.find(':input').val('');
$form.find(':checkbox, :radio').prop('checked', false);
}
});
此代码尚未测试，但它应该可以使用，如果您有任何问题，请告诉我。
根据您的情况，您应该考虑使用多种形式用于不同用途......实际上，如果您使用多种形式，则无需担心清除其他形式的输入。您也在不同选项卡中使用相同的ID作为输入，但在同一表单中。