如果用户未在下拉列表中选择任何项目然后关注该下拉列表,我想显示警告消息。我希望在“select”类的所有下拉列表中执行此操作。
$("#submit").click(function(event) {
if (!$(".select").val()) {
alert("please select one");
event.preventDefault();
$(".select").focus();
}
});
现在,这适用于一个下拉列表,但是当有多个下拉列表时,它会关注最后一个,而不是特定的下拉列表。例如,考虑一个带有三个下拉列表的html页面。
<select class="select" id="usertype">
<option value="">Select one</option>
<option value="guest">Guest</option>
<option value="admin">Admin</option>
</select>
<select class="select" id="gender">
<option value="">Select one</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select class="select" id="languages">
<option value="">Select one</option>
<option value="c++">c++</option>
<option value="c">c</option>
</select>
如果我选择了两种语言和性别的某些项目,但从usertype中选择了任何内容(“Select one”的值为“”),则会显示警告消息,但重点是语言,而不是usertype。
我应该怎样做才能专注于取消选择下拉列表(如果用户没有从多个下拉列表中选择项目,那么第一个未选中)?
答案 0 :(得分:4)
这个怎么样:
$("#submit").click(function(event) {
if (!$(".select").val()) {
alert("please select one");
event.preventDefault();
$(".select[selectedIndex=0]").focus();
}
});
答案 1 :(得分:1)
您可以使用$.each
,
$("#submit").click(function(event) {
$(".select").each(function(){
if (!$(this).val()) {
alert("please select one");
event.preventDefault();
$(this).focus();
return false;
}
});
});
答案 2 :(得分:1)
鉴于更新的HTML,面对一些猖獗的无法解释的向下投票,我建议如下:
// binding the anonymous function of the 'click'
// method as the event-handler for clicks on the
// element with the id of 'submit':
$("#submit").click(function (event) {
// caching all the elements with the class of
// 'select':
var selects = $('.select'),
// filtering those cached elements elements,
// retaining only those for whom the assessment
// provided to filter()'s anonymous function
// returns a value of true, or is 'truthy':
hasNoValue = selects.filter(function () {
// here we're checking that the current
// select has a value of '' (empty string):
return this.value === '' &&
// and that its currently selected <option>
// (this.options is a collection of the
// <option> elements within the current
// <select> element, and this.selectedIndex
// is the index of the selected <option>
// in the options collection) has the
// text of 'Select one'
// (String.prototype.trim() removes leading
// and trailing white-space from a supplied
// string):
this.options[this.selectedIndex].text.trim() === 'Select one'
});
// if the hasNoValue collection of <select> elements has a length
// other than (the 'falsey') 0, then we enter the 'if':
if (hasNoValue.length) {
// preventing the default action of the click event:
event.preventDefault();
// selecting the first element from the collection
// held within hasNoValue, and focusing that one:
hasNoValue.eq(0).focus();
}
});
$("#submit").click(function(event) {
var selects = $('.select'),
hasNoValue = selects.filter(function() {
return this.value === '' && this.options[this.selectedIndex].text.trim() === 'Select one'
});
if (hasNoValue.length) {
hasNoValue.eq(0).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" id="usertype">
<option value="">Select one</option>
<option value="guest">Guest</option>
<option value="admin">Admin</option>
</select>
<select class="select" id="gender">
<option value="">Select one</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select class="select" id="languages">
<option value="">Select one</option>
<option value="c++">c++</option>
<option value="c">c</option>
</select>
<button id="submit">submit button</button>
外部JS Fiddle demo,用于实验和开发。
参考文献: