又是我。我的网站出现新问题,因为我没有足够的知识独自解决问题。
我的网站上有两个选择字段,当我从第一个选择中选择一个选项时,我想要功能时必须隐藏第二个选择中的相同选项。
例如: 选择1: 选项A 选项B 选项C
选择2: 选项A 选项B 选项C
当我在第一个或第二个中选择OPTION A时, 选项A必须从另一个选择中删除。
最好的做法是,如果未选择一个选项,则阻止提交按钮并显示红色边框,这样,如果用户未从任何选择中选择一个选项,则用户将无法继续进入下一页。
这是我的选择代码:
<form action="" method="POST" id="postForm">
<div class="row">
<div class="col-md-9 register-right">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading"><b>EXCHANGE</b></h3>
<div class="row register-form">
<div class="col-md-12"> <label for="buy"><b>YOU SEND:</b></label>
<div class="form-group">
<select class="form-control" name="buy" id="buyoption">
<option class="hidden" selected disabled value="">Please select what you want to sell</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div><label for="buy"><b>YOU RECEIVE:</b></label>
<div class="form-group">
<select class="form-control" name="sell" id="selloption">
<option class="hidden" selected disabled value="">Please select what you want receive</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div><input type="submit" class="btnRegister" value="SEND" /> </div>
</div>
</div>
</div>
</div>
</div>
</form>
编辑: 这是隐藏选择的解决方案。终于可以了。
$(document).ready(function(){
$('select').on('change', function(event ) {
var prevValue = $(this).data('previous');
$('select').not(this).find('option[value="'+prevValue+'"]').show();
var value = $(this).val();
$(this).data('previous',value); $('select').not(this).find('option[value="'+value+'"]').hide();
});
});
更明确地说,如果他没有选择任何内容,并且如果他单击“提交”按钮,那么我想在同一选择上加上红色边框,因为他没有单击任何内容,值将是以下内容:
请选择 你想卖
网站无法正常运行。
谢谢大家。