如果selectbox value为空，则警告

Question

我需要检查select框option值是否为空，即。用户没有选择任何东西。当他点击按钮时，系统应该显示一个alert。

我正在尝试这个，但是它不工作。

$(document).ready(function() {
$(document).on('change', '.sedra1', function() {
var m = $(this).val();
if ($(this).val() == 0) {
alert("Please choose some option");
return;
} else {
$('.button > a').attr('href', 'accessories/tatreez/tatreez-view.php?id=' + m);
}
});
});

这是选择框

<select class="form-control embroiderys-value p-0 sedra1" required>

<option selected disabled> Select </option>

<?php

$result = $conn->query("SELECT * FROM embroidery");

while ($row = $result->fetch_assoc()) {

echo '<option type="embroidery" img="' . $row['image'] . '" value="' . $row['id'] . '"> E' . $row['id'] . '</option>';

}

?>
</select>
</div>
</div>
<div class="col-3 p-0 button">
<a class="btn btn-primary" href=""  role="button">تفاصيل</a>
</div>

Answer 1

您可以查看此解决方案。对于你的代码…我想这对你会有用的。

$(document).ready(function() {
$(document).on('change', '.sedra1', function() {
var m=$(this).val();
if( m == ''){
alert("Please choose some option");
return;
}else{
alert(m);//you can put your redirection
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="sedra1">
<option value="select_1">Select 1</option>
<option value="">Select Empty</option>
<option value="Select_3">Select Value</option>
<option value="">Select Empty</option>
</select>

Answer 2

您可以在单击按钮时尝试此操作。

$(document).ready(function() {
$(document).on('click', '.yourclass', function() {
var m=$('#sedra1').val();
if( m == ''){
alert("Please choose some option");
return;
}else{
alert(m); //you can put your redirection
return;
}
});
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select id="sedra1">
<option value="select_1">Select 1</option>
<option value="">Select Empty</option>
<option value="Select_3">Select Value</option>
<option value="">Select Empty</option>
</select>
</div>
<div class="col-3 p-0 button">
<a class="btn yourclass btn-primary" href=""  role="button">تفاصيل</a>
</div>