JSFiddle - React, Tailwind, and code Playground
by Amit Bhagat
HTML
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<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="statusSelect2" 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="statusSelect3" 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>
<button onClick="save()">
Save
</button>
<script>
function save() {
let order = [];
// all dropdowns
var allDropdowns = $('select[name="statusSelect[]"]'),
// empty selected options
emptySelectedOptions = allDropdowns.find('[value=empty]:selected'),
// flag if valid
isValid = (emptySelectedOptions.length === 0);
if (!isValid){
// exit
alert('Please select option from all!');
return;
}
allDropdowns.each(function() {
let id = this[this.selectedIndex].id;
let value = this.value;
alert('Saving...');
// else continue if all selects have a value
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,...