Jquery显示动态选定选项的名称

Question

我想显示选定值中选定的显示名称。此处显示的值是动态显示的，当我使用警报时它可以工作但我很困惑将单独的文本设置为选定值。

$(document).ready(function() {
	      $(function() {
	        $('#select').change(function(){ 
	         showval=$(this).val();
	            alert(showval); 
	            $('#' + showval).show();
	        });
	      });
	    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="<?php echo $base_url;?>user/insertleaveappln">
		    <div class="modal-body p-b-0">
		      <div class="row">
		          <div class="col-sm-12">
		              <div>
		                <label class="form-control-label">Leave Type</label>
		                  <select name="leavetype" class="form-control" id="select">
		                      <option value="select">Select</option>  
		                        <?php foreach($leavetype as $leaveappln_info){ ?>
		                        <option value="<?php echo $leaveappln_info->leavetype_id?>"><?php echo $leaveappln_info->leavetype_name; ?></option>
		                        <?php } ?>  
		                  </select>
		              </div>
		          </div>   

		          <div class="col-sm-12">
		              <div>
		                  <label class="form-control-label">Start Date</label>
		                  <input type="date" name="start_date" class="form-control startdate" placeholder="Start Date" id="startdate" required onchange="cal()">
		              </div>
		          </div>
		          <div class="col-sm-12">
		              <div>
		                  <label class="form-control-label">End Date</label>
		                  <input type="date" name="end_date" class="form-control enddate" placeholder="End Date" id="enddate" required onchange="cal()">
		              </div>
		          </div>
		          <div class="col-sm-12">
		              <div>
		                  <label class="form-control-label">Count Days</label>
		                  <input type="text" name="count_days" class="form-control" placeholder="Count Days" id="countdays" readonly>
		              </div>
		          </div>
		          <div class="col-sm-12">
		              <div>
		                  <label class="form-control-label">Reason</label>
		                  <textarea name="reason" class="form-control" placeholder="Reason"> </textarea> 
		              </div>
		          </div>
		      </div>  
		  </div>
		  <div class="modal-footer"> 
		      <input type="submit" name="submit" value="submit" class="btn btn-primary">
		      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
		  </div>
</form>

假设如果我想选择第一个选项作为一个，它会在您选择一个选项时显示另一个 div，如果我选择选项作为两个，它会显示您被选择两个这样的

Answer 1

试试这个

 $(document).ready(function() {
      $(function() {
        $('#select').change(function(){ 
			showval=$(this).val();
            $('#hiddenval').val(showval);
			$('.show_selected').html("Your selected name:"+$(this).find('option:selected').text());           
        });
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <form method="POST" action="localhost/user/insertleaveappln">
        <div class="modal-body p-b-0">
          <div class="row">
              <div class="col-sm-12">
                  <div>
                    <label class="form-control-label">Leave Type</label>
                      <select name="leavetype" class="form-control" id="select">
                          <option value="select">Select</option>  
                            <option value="1">1 name</option>
                            <option value="3">3 name</option>
                            <option value="2">2 name</option>
                      </select>
                  </div>
              </div>   
              
              <div class="show_selected"></div>
              <input type="hidden" name="display_name_id" value="" id="hiddenval">
              
			 <div class="col-sm-12">
					<div>
                      <label class="form-control-label">Start Date</label>
                      <input type="date" name="start_date" class="form-control startdate" placeholder="Start Date" id="startdate" required onchange="cal()">
                  </div>
              </div>
              <div class="col-sm-12">
                  <div>
                      <label class="form-control-label">End Date</label>
                      <input type="date" name="end_date" class="form-control enddate" placeholder="End Date" id="enddate" required onchange="cal()">
                  </div>
              </div>
              <div class="col-sm-12">
                  <div>
                      <label class="form-control-label">Count Days</label>
                      <input type="text" name="count_days" class="form-control" placeholder="Count Days" id="countdays" readonly>
                  </div>
              </div>
              <div class="col-sm-12">
                  <div>
                      <label class="form-control-label">Reason</label>
                      <textarea name="reason" class="form-control" placeholder="Reason"> </textarea> 
                  </div>
              </div>
          </div>  
      </div>
      <div class="modal-footer"> 
          <input type="submit" name="submit" value="submit" class="btn btn-primary">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </form>