Question

我有一个可以输出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); 

}

Answer 1

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

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'));
    }
}

Answer 2

 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);
            }

Answer 3

$(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;

});

});

Answer 4

$(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;
   });

});

使用select的名称标签获取标签的值

4 个答案: