我正在尝试根据下拉列表选择验证文本框，这意味着如果用户从下拉列表中选择E-mail或SMS或both，它会显示基于用户选择的文本框。假设他们选择的电子邮件，它显示一个文本框供用户输入他们的电子邮件，让我们说他们忘记输入电子邮件地址(将其留空(，然后单击按钮， 在这里，我想要显示警报("您忘记输入电子邮件"(。
为此，我做了如下操作，但问题是当用户从下拉列表中select电子邮件时，它会显示警报，这是我不希望的，我希望当用户选择来自 DDL 的电子邮件时，它会显示一个文本框，如果文本框为空显示 alert((，所以我错了什么！谁能帮助我或为我指出正确的方向！:)
提前谢谢。
.HTML：
<div class="col-md-6">
<div class="form-group">
<select class="form-control border-input" id="ddlsmsemailboth" name="ddlsmsemailboth">
<option value="">- Select -</option>
<option value="S">SMS</option>
<option value="M">E-mail</option>
<option value="B">SMS/Email</option>
</select>
<div id="dvkemail" style="display: none">
<label class="form-control-label">Enter E-mail</label>
<input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
</div>
<div id="dvksms" style="display: none">
<label class="form-control-label">Enter phone number </label>
<input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
</div>
<div id="dvkboth" style="display: none">
<label class="form-control-label">Enter phone number </label>
<input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
<label class="form-control-label">Enter E-mail</label>
<input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
<button id="btnSubmitRMA" type="submit" class="btn">Submit</button>
</div>
</div>
</div>
JavaScript：
$("#btnSubmitRMA").click(function (e) {
e.preventDefault();
RMAfunction();
});
function RMAfunction() {
$("#ddlsmsemailboth").change(function () {
if ($(this).val() == "M") {
if ($('input[name=EmailContact]').val() == "") {
alert("Empty");
return false;
}
}
});
});
JavaScript(用于基于下拉所选值隐藏/显示texbox(：
$(function () {
$("#ddlsmsemailboth").change(function () {
if ($(this).val() == "S") {
$("#dvksms").show();
$("#dvkemail").hide();
$("#dvkboth").hide();
}
else if ($(this).val() == "M") {
$("#dvkemail").show();
$("#dvksms").hide();
$("#dvkboth").hide();
}
else if ($(this).val() == "B") {
$("#dvkboth").show();
$("#dvkemail").hide();
$("#dvksms").hide();
}
else {
$("#dvkboth").hide();
$("#dvkemail").hide();
$("#dvksms").hide();
}
});
});
试试这个 -
附加带有单击事件的按钮 -
.HTML
<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>
<div class="col-md-6">
<div class="form-group">
<select class="form-control border-input" id="ddlsmsemailboth" name="ddlsmsemailboth">
<option value="">- Select -</option>
<option value="S">SMS</option>
<option value="M">E-mail</option>
<option value="B">SMS/Email</option>
</select>
<div id="dvkemail" style="display: none">
<label class="form-control-label">Enter E-mail</label>
<input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
</div>
<div id="dvksms" style="display: none">
<label class="form-control-label">Enter phone number </label>
<input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
</div>
<div id="dvkboth" style="display: none">
<label class="form-control-label">Enter phone number </label>
<input name="Telefonnummer" id="Telefonnummer" type="tel" placeholder="4512345678" class="form-control border-input">
<label class="form-control-label">Enter E-mail</label>
<input name="EmailContact" id="EmailContact" type="text" class="form-control border-input">
</div>
<button id="btnSubmitRMA" type="submit" class="btn">Submit</button>
</div>
</div>
</BODY>
</HTML>
.JS
点击按钮时触发点击功能
$(document).ready(function ()
{
$("#btnSubmitRMA").click(function (e) {
e.preventDefault();
});
$("#btnSubmitRMA").click(function () {
if ($("#ddlsmsemailboth").val() == "M") {
if ($('input[name=EmailContact]').val() == "") {
alert("Empty");
return false;
}
}
});
$(function () {
$("#ddlsmsemailboth").change(function () {
if ($(this).val() == "S") {
$("#dvksms").show();
$("#dvkemail").hide();
$("#dvkboth").hide();
}
else if ($(this).val() == "M") {
$("#dvkemail").show();
$("#dvksms").hide();
$("#dvkboth").hide();
}
else if ($(this).val() == "B") {
$("#dvkboth").show();
$("#dvkemail").hide();
$("#dvksms").hide();
}
else {
$("#dvkboth").hide();
$("#dvkemail").hide();
$("#dvksms").hide();
}
});
});
});
您可以将函数 RMAfunction(( 更改为：
function RMAfunction() {
if ($('#ddlsmsemailboth').val() == "M") {
if ($('input[name=EmailContact]').val() == "") {
alert("Empty");
return false;
}
}
}
你可以修改你的RMAfunction((，并确保表单标签应该在你的html中
$(document).ready(function () {
$("#btnSubmitRMA").click(function (e) {
e.preventDefault();
RMAfunction();
});
});
function RMAfunction() {
if($("#ddlsmsemailboth option:selected").val() == "M"
&& $('input[name=EmailContact]').val() == "" ){
alert("you forgot enter you email");
return false;
}
}