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 に答える