下拉弹出问题

Question

在下拉菜单中，每当我选择我是学生字段的弹出框应该生成，但它不是生成。当我选择我是学生领域一样正常。请找到下面的代码。我的表单代码:

<div class="" id="contactFrm">
<div class="container" >
<div class="col-md-12 reg-form" id="contactFrm">
<form role="form" name="form1" action="send.php" method="post" class="reg-form1" id="RegistrationForm" data-toggle="validator" onload='document.form1.email.focus()'  >
<p class="txt-ll"><strong>Name *</strong></p>
<div class="form-group">
<input name="name" required="required" type="text" placeholder="Enter Your Name" />
</div>
<p class="txt-ll"><strong>Email Address *</strong></p>
<div class="form-group">
<input name="email" required="required" type="text" placeholder="Email ID" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$"/>
</div>
<p class="txt-ll"><strong>Mobile Number *</strong></p>
<div class="form-group">
<input name="mobile" required="required" type="text" placeholder="Enter Mobile No" minlength="10" maxlength="100" pattern="d{10-15}"/>
</div>
<p class="txt-ll"><strong>City *</strong></p>
<div class="form-group">
<input name="city" type="text" placeholder="City">
</div>
<p class="txt-ll"><strong>Work Experience *</strong></p>
<div class="form-group">
<select id="change" name="province" class="form-control" required>
<option value="">Select*</option>
<option value="Student">I am a Student </option>
<option value="< 1 Year"> < 1 Year </option>
<option value="1-2 Years">1-2 Years </option>
<option value="3-5 Years"> 3-5 Years </option>
<option value="5-8 Years"> 5-8 Years </option>
<option value=" 8-12 Years"> 8-12 Years </option>
<option value=">15 Years"> >15 Years </option>
</select>

<input class=" form-control-submit-button" name="submit" type="submit" value="REGISTER NOW" />
<div class="form-message">
<div id="msgSubmit" class="h3 text-center hidden"></div>

<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我添加的脚本是:

<script type="text/javascript">
//Use the id of the form instead of #change
$('#change').change(function(){
//this is just getting the value that is selected
var title = $(Student).val();
$('.modal-title').html(title);
$('.modal').modal('show');
});
</script>

网站链接:https://blockchain-academy.in/

请帮我解决这个问题。提前感谢!

Answer 1

如果选择为student，则需要获取所选选项的值并调用模型。

$('#change').change(function(){
const title = this.value;    
var selectedOption = $(this).val();
if (selectedOption == "Student"){
$('.modal').modal('show');
$('.modal-title').html(title);
}

});

请检查提琴

Answer 2

几点:

1. 在第三个选项"<1 year"将<替换为<。浏览器试图悄悄地修复它。但你不应该使用原始的<或>。

2. 在您的更改事件中这样做以获得值(绝对不要使用var而使用const或let)

const title = this.value;

我不太了解jquery，也不知道.modal是什么，所以这是我能做的。

在未来，如果你查看浏览器日志，你会发现$(Student)和.val是无效的