Question

我希望用户明确地从下拉列表中选择值。如果他/她没有选择值但尝试提交表单，则应显示错误消息，最重要的是将焦点转移到下拉列表。这是我的下拉列表。

<select name="mydropdown" id="drpdwn">
    <option value="default" disabled selected="selected">Select From List</option>
    <option value="Legal">Legal</option>
    <option value="Pharma">Pharma</option>
    <option value="Real Estate">Real Estate</option>
    <option value="Other">Other</option>
</select>

我尝试使用jQuery使用下面的代码检索值，但它不起作用。

form.submit(function () {
    var drpval = $('#drpdwn option:selected').val()
    if (drpval == 'default') {
        $("#drpdwn").focus();
    }
});;

我是jQuery的新手，如果我完全错了，那么请原谅。你能否建议一下如何以正确的方式来达到用户的效果 1.从下拉列表中选择 2.设置焦点，以防他/她没有

这是jsfiddle：http://jsfiddle.net/techdatavi/f7Jj4/

Answer 1

您是否只能使用＆＃39; required＆＃39;？

<select name="mydropdown" id="drpdwn" required>
    <option value="default" disabled selected="selected" >Select From List </option>
    <option value="Legal">Legal</option>
    <option value="Pharma">Pharma</option>
    <option value="Real Estate">Real Estate</option>
    <option value="Other">Other </option>
</select>

编辑：如果需要＆＃39;我不看这个例子 - http://jsfiddle.net/f7Jj4/1/

$('#drpdwn').blur(function() {
    var drpval = $('#drpdwn option:selected').val();
    console.log(drpval);
});

因为默认设置已被停用＆＃39;它不会记录模糊的任何内容，它只会在更改后记录模糊。因为没有价值，您必须测试select的值以进行焦点更改。这就是为什么需要＆＃39;是有价值的，因为你可能永远不会模糊下拉。

编辑：这是一个表现出焦点回归的小提琴 - http://jsfiddle.net/f7Jj4/2/

$('#drpdwn').blur(function() {
    var drpval = $('#drpdwn option:selected').val();
    console.log(drpval);
    //console.log( $('#drpdwn').val() );
    if('default' == drpval) {
        $('#drpdwn').focus().css('border', '1px solid red');
    }
});

Answer 2

您是否尝试过使用＆＃39; .value＆＃39;而不是＆＃39; .val（）＆＃39;？我不确切知道.val（）是否可用于选项标签或仅用于文本输入元素。你检查过控制台是否有错误？

Answer 3

好的，我想你的html进入了一个表单标签，而且这个表单有一个提交按钮，如下所示：

<form id="myform">
    <select name="mydropdown" id="drpdwn">
        <option value="default" selected="selected">Select From List</option>
        <option value="Legal">Legal</option>
        <option value="Pharma">Pharma</option>
        <option value="Real Estate">Real Estate</option>
        <option value="Other">Other</option>
    </select>
    <button id="mybutton">Submit</button>
</form>

使用一些jQuery，我可以做你想做的事。

$(document).ready(function () {

    $('#mybutton').click(function (e) {
        e.preventDefault();
        if ($('#drpdwn').val() == 'default') {
            $("#drpdwn").focus();
        } else {
            $('#myform').submit();
        }
    });
});

这是您确切问题的解决方案但是如果您在提交之前有其他要检查的字段我强烈推荐使用jqueryvalidation.org插件，非常好用且易于使用。

我的代码LINK

的jsFiddle工作示例

Answer 4

试试这个

HTML

<form id="myform">
    <select name="mydropdown" id="drpdwn" >
        <option value="default" disabled selected="selected" >Select From List </option>
        <option value="Legal">Legal</option>
        <option value="Pharma">Pharma</option>
        <option value="Real Estate">Real Estate</option>
        <option value="Other">Other </option>
    </select>
    <input type="button" id="mybutton" value="submit">
</form>

的javascript

$('#mybutton').click(function () {
    if ($('#drpdwn option:selected').val() == 'default') 
    {
       //error message here...
       $("#drpdwn").focus();
    }else{
       $('#myform').submit(); // do the submit
    }
});

Answer 5

jqueryvalidation.org是你的朋友。

这是代码：

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script>
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
var myRules = {
        your_drop_down: {
        required: true
        }
    };

$( "#myform" ).validate({
  rules: myRules
});
</script>

更多示例可在以下网址找到：http://jqueryvalidation.org/documentation/

如何强制用户从下拉列表中选择值并更改焦点

5 个答案: