下拉弹出问题

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>

网站link：https://blockchain-academy.in/

请帮我解决这个问题。提前致谢！

Answer 1

两件事：

在第三个选项“< 1 年”中将 < 替换为 <。浏览器会尝试静默修复它。但是你不应该使用原始 < 或 >.
在您的更改事件中执行此操作以获取值（绝对不要使用 var 而是使用 const 或 let）

  const title = this.value;

我不太了解 jquery 或 .modal 是什么，所以我只能做这些了。

将来如果您查看浏览器日志，您会发现 $(Student) 和 .val 无效

Answer 2

为此，您需要获取所选的选项值并调用模型（如果它被选为学生）。

$('#change').change(function(){
    const title = this.value;    
    var selectedOption = $(this).val();

    if (selectedOption == "Student"){
        $('.modal').modal('show');
      $('.modal-title').html(title);
    }
   
});

请检查这个Fiddle

下拉弹出问题

Dropdown Popup Issue

html

javascript

css

forms

popup