1

我有一个可以输出 0 个或多个选择框的系统，我需要添加一些 Javascript/JQuery 验证。我是编写 JQuery 的新手，我一直在获取错误消息的文本标签内容：这是我的选择框表单的示例：

<div id="prodOptions" class="sale">
   <p class="elevenText floatLeft">Product options</p>
    <div class="floatLeft"><label for="colour">Select Colour</label>
    <select name="colour">
        <option value="" selected="selected">---</option>
        <option value="blue">Blue</option>
    </select>
</div>
<div class="floatLeft">
    <label for="size">Select Size</label>
    <select name="size">
        <option value="" selected="selected">---</option>
        <option value="small">Small</option>
    </select>
</div>
<div class="floatLeft">
    <label for="flavour">Select Flavour</label>
    <select name="flavour">
        <option value="" selected="selected">---</option>
        <option value="cherry">Cherry</option>
    </select>
</div>

这是我在提交表单时调用的javascript函数（警报用于测试）：

function validateOptions()
{

    selectList = $('select').get();
    message = "";

    for(i=0; i<selectList.length; ++i)
    {

            //alert(selectList[i].name);
            selector = "for[=\""+selectList[i].name+"\"]";
            alert(selector);
            alert($(selector.value));
            message += ($(selectList[i]).prop('selected', true).val() == "") ? "Please enter a value for \r\n" : "";

    }

    alert(message); 

}
4

4 回答 4

3

您的属性语法不正确。你的选择器应该是

var selector = "label[for='" + selectList[i].name + "']";

从那里，您应该获取标签的.html()，而不是.val()

此外，标签应该引用元素 ID，而不是名称。您希望如何格式化您的消息也不是很清楚。你应该能够做这样的事情：

function validateOptions()
{

    var message = '';

    $('select').each(function() {
       if($(this).val() == '') {
          var label = $('label[for="' + $(this).attr('id') + '"]');
          message += 'Please select a value for: ' + label.html() + '\n';
       }
    });

    alert(message);
}

您还可以像这样格式化错误消息：

function validateOptions()
{
    var emptyFields = [];
    $('select').each(function() {
       if($(this).val() == '') {
          var label = $('label[for="' + $(this).attr('id') + '"]');
          emptyFields.push(label.html());
       }
    });

    if(emptyFields.length > 0) {
       alert('Please select a value for:\n' + emptyFields.join('\n'));
    }
}
于 2012-06-07T13:13:53.607 回答
0 
 function validateOptions() {
                message = "";

                $('select').each(function (i) {
                    message += ($(this).prop('selected', true).val() == "") ? "Please enter a value for" + $(this).prev().html() + " \r\n" : "";
                });

                alert(message);
            }
于 2012-06-07T13:25:01.883 回答
0 
$(document).ready(function(){ var allSelect = $('select');

 $.each(allSelect,function(k,v){

    var thIs = $(this);
    var name = thIs.attr('name');

    if(name == 'colour')
    {
       // Do what you want to do with colour select here eg:-
       alert(thIs.prev('label').text());
       } else if(name == 'size'){
       alert(thIs.prev('label').text());
       } else if(name == 'flavour'){
       alert(thIs.prev('label').text());
       }
   return false;

});

});
于 2012-06-07T14:05:25.403 回答
-2 
$(document).ready(function(){
  var allSelect = $('select');

     $.each(allSelect,function(k,v){

        var thIs = $(this);
    var name = thIs.attr('name');

        if(name == 'colour')
        {
      // Do what you want to do with colour select here eg:-
    thIs.prepend('<option value="1">White</option>
                 <option value="2">Black</option>
                 <option value="3">Gray</option>');
    } else if(name == 'size'){
      // Do what you want to do with size select here
    } else if(name == 'flavour'){
      // Do what you want to do with flavour select here
    }
       return false;
   });

});
于 2012-06-07T13:41:00.107 回答