複数の選択要素にオプションが選択されていることを確認する

-1

X個の行のループで作成されたテーブルがあります。各行には選択があります。私はそれぞれの選択をループしたいし、値が選択されていない場合は、関数を完全に停止し、フォームを送信しないでください。問題は、1つの行に選択された値があり、2つの行が存在しない場合、その行を送信しますが、すべての行に選択された値がない限り、送信しないことです。ここで複数の選択要素にオプションが選択されていることを確認する

は、あなたがあなたの各ループの前にチェックを追加することができ、問題の例とjsfiddle

https://jsfiddle.net/ypx91hk0/2/

コード

function save() { 
 

 
    let order = []; 
 

 
    $('select[name="statusSelect[]"]').each(function() { 
 
    let id = this[this.selectedIndex].id; 
 
    let value = this.value; 
 

 
    if (value === 'empty') { 
 
     console.log("empty"); 
 
     $(".alertEmptySelect").show(); 
 
     return; 
 
    } 
 

 
    order.push({id: id, status: value}); 
 
    let data = JSON.stringify(order); 
 

 
    $.ajax({ 
 
     method: 'put', 
 
     url: '', 
 
     data: data, 
 
     contentType: "application/json; charset=utf-8", 
 
     dataType: "json", 
 
     async: false, 
 
     success: function(response){ 
 
     $(".alertSubmitted").show("slow"); 
 
     }, 
 
     error: function (data) { 
 
     console.log(data); 
 
     let errorString = ''; 
 
     $.each(data.responseJSON, function (key, value) { 
 
      errorString += '<li>' + value + '</li>'; 
 
     }); 
 
     $('.alertError').show().html(errorString); 
 
     } 
 
    }); 
 
    }); 
 
}


 

 
<select name="statusSelect[]" id="statusSelect" onchange="changeColor(this, {{$product->id}})" class="form-control" required> 
 
    <option value="empty" disabled selected hidden>Please Choose...</option> 
 
    <option id={{$product->id}} value="a">A</option> 
 
    <option id={{$product->id}} value="r">R</option> 
 
</select>

出典

2017-07-19 derrickrozay

「HTML」の文書の要素の「id」は一意である必要があります。リンクされたjsfiddleで 'changeColor'がどこに定義されていますか？ – guest271314

try-catchブロックの使用はどうですか？今のところ、 'break'文は' $ .each（） 'に渡された関数から抜けるだけです。その結果、すべての選択ボックスをループします。 'try'ブロックの中で' save（） 'を呼び出してエラーをスローすることができます。このようにして、エラーは関数呼び出しスタックを介してバブルアップし、キャッチして処理できます。 –

[重複した質問]（https://stackoverflow.com/questions/45200759/） –

です。

function save() { 

    let order = []; 

    var hasEmptySelect = $('select[name="statusSelect[]"]') 
     .map((idx, elem) => elem.value) 
     .filter(value => value === "empty") 
     .length > 0; 

    if (hasEmptySelect) { 
     return; 
    } 

    // The rest of your code 
}

出典

2017-07-19 23:25:42

これは動作しません。それはまだif – derrickrozay

はあなたのAJAX呼び出しのために別の関数を作成し、あなたのすべての選択を意味order.length === $('select').lengthが選択されている場合にのみ、その関数を呼び出すことができます。

var hasEmptySelect = $('select[name="statusSelect[]"]') 
    .map((idx, elem) => elem.value) 
    .filter(value => value === "empty") 
    .length > 0;

は、だから、で終わります。

function save() { 

    let order = []; 

    $('select[name="statusSelect[]"]').each(function() { 
    let id = this[this.selectedIndex].id; 
    let value = this.value; 

    // if any of the selects values === 'empty' break 
    if (value === 'empty') { 
     console.log("empty"); 
     alert('empty'); 
     $(".alertEmptySelect").show(); 
     return; 
    } 

    alert('Saving...'); 

    // else continue if all selects have a value 
    order.push({ 
     id: id, 
     status: value 
    }); 
    if(order.length === $('select').length) 
     saveValues(JSON.stringify(order)); 
    }); 

    function saveValues(data){ 
    $.ajax({ 
     method: 'put', 
     url: '', 
     data: data, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     async: false, 
     success: function(response) { 
     $(".alertSubmitted").show("slow"); 
     }, 
     error: function(data) { 
     console.log(data); 
     let errorString = ''; 
     $.each(data.responseJSON, function(key, value) { 
      errorString += '<li>' + value + '</li>'; 
     }); 
     $('.alertError').show().html(errorString); 
     } 
    }); 
    } 
}

出典

2017-07-19 23:31:12 Dij

最初に説明すると、ループ外に変数、たとえばvar flag = 0を保持することをお勧めします。次に、ループが条件を満たす場合にのみ、ループの各繰り返しでこのフラグ値を1ずつ増やします。その行のselect要素のオプションが選択されました。

ループがすべての繰り返しを完了した後、flag変数の値がループの反復回数に等しいことを確認します。つまり、合計5つの選択要素がある場合、ループが終了すると、各選択要素にユーザーが選択したオプション/値があれば、フラグの値は5になります。そしてフォームを提出するか、ajax関数を呼び出します。以下は動作するコードです。私はjqueryを使用しています。：

<!DOCTYPE html> 
    <html> 
    <body> 
    <select name="statusSelect[]" id="statusSelect" onchange="changeColor(this, 123)" class="form-control" required> 
     <option value="empty" disabled selected hidden>Please Choose...</option> 
     <option id="123" value="a">A</option> 
     <option id="456" value="r">R</option> 
    </select> 
    <select name="statusSelect[]" id="statusSelect" class="form-control" required> 
     <option value="empty" disabled selected hidden>Please Choose...</option> 
     <option id="123" value="a">A</option> 
     <option id="456" value="r">R</option> 
    </select> 
    <select name="statusSelect[]" id="statusSelect" class="form-control" required> 
     <option value="empty" disabled selected hidden>Please Choose...</option> 
     <option id="123" value="a">A</option> 
     <option id="456" value="r">R</option> 
    </select> 
    <select name="statusSelect[]" id="statusSelect" class="form-control" required> 
     <option value="empty" disabled selected hidden>Please Choose...</option> 
     <option id="123" value="a">A</option> 
     <option id="456" value="r">R</option> 
    </select> 
    <button> 
    Save 
    </button> 

    <script 
     src="https://code.jquery.com/jquery-3.2.1.min.js" 
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
     crossorigin="anonymous"></script> 
    <script> 
    $(document).ready(function(){ 
    $('button').click(function(){ 
     let flag = 0, rows = 0; 
     let order = []; 

     $('select[name="statusSelect[]"]').each(function() { 
     rows = rows + 1; 
     let id = this[this.selectedIndex].id; 
     let value = this.value; 

     // if any of the selects values === 'empty' break 
     if (value === 'empty') { 
      console.log("empty"); 
      alert('empty'); 
      $(".alertEmptySelect").show(); 
      return; 
     } 

     else //since a value was selected, increase flat by 1 and add order to array that will be used in ajax function as data 
     { 
      flag = flag + 1; 
      order.push({ 
      id: id, 
      status: value 
      }); 
     } 
     }); //end of loop 


     //now check if flag variable = total number of iterations/rows 
     if(flag == rows) 
     { //call ajax and etc. etc. 
     let data = JSON.stringify(order); 
      $.ajax({ 
      method: 'put', 
      url: '', 
      data: data, 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      async: false, 
      success: function(response) { 
       $(".alertSubmitted").show("slow"); 
      }, 
      error: function(data) { 
       console.log(data); 
       let errorString = ''; 
       $.each(data.responseJSON, function(key, value) { 
       errorString += '<li>' + value + '</li>'; 
       }); 
       $('.alertError').show().html(errorString); 
      } 
      }); 
     } 

     // else if flag != row, show alert to user 
     else alert('select all options'); 

     }); 
    }); 
    </script> 
    </body> 
    </html>

出典

2017-07-20 00:55:13

複数の選択要素にオプションが選択されていることを確認する

答えて

関連する問題