Rupali Rupali - 29 days ago 15
HTML Question

Unable to get the text of label of the selected select tag

I need to get the text of label of selected select tag so that I can use that label text and set in another input tag but getting (an empty string) ...Following is my HTML code and jquery code



function getClassesAndYear(CollegeId, cnt) {
var text = $(this).closest('label').text();
console.log("text");
console.log(text);
}


//Following is the code used on university select
function getColleges(UniId, cnt){
var text = $(UniId).siblings('label').text();
console.log("text");
console.log(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is HTML code-
<div class="col-md-2">
<label class="control-label">University</label>
<select name="universityId" class="form-control" onchange="getColleges(this.value, 1)" id="universityNameId1">
<option value="">Select University</option>
{% for university in universityName %}
<option value="{{university.id}}">{{university.university_name}}</option>
{% endfor %}
</select>
</div>

<div class="col-md-2">
<label class="control-label">College Name</label>
<select name="collegeName" id="collegeNameId1" onchange="getClassesAndYear(this, 1)" class="form-control" multiple="multiple">
<option value="">Select College</option>
</select>
</div>

<div class="col-md-2">
<label class="control-label">Enrollment Year</label>
<select name="enrollmentYear" id="yearNameId1" onchange="getClassesAndYear(this, 1)" class="form-control" multiple="multiple">
<option value="">Select Year</option>
</select>
</div>

<div class="col-md-2">
<label class="control-label col-md-3">Class</label>
<select id="classNameId1" class="form-control select2 classNameId" name="className" multiple>
<option value="">Select Class</option>
</select>
</div>




Answer

Use siblings() method and use CollegeId instead of this where this is not refers to the element.

function getClassesAndYear(CollegeId, cnt){     
    var text = $(CollegeId).siblings('label').text();
    console.log("text");
    console.log(text);
}

function getClassesAndYear(CollegeId, cnt) {
  var text = $(CollegeId).siblings('label').text();
  console.log(text);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is HTML code-


<div class="col-md-2">
  <label class="control-label">College Name</label>
  <select name="collegeName" id="collegeNameId1" onchange="getClassesAndYear(this, 1)" class="form-control" multiple="multiple">
    <option value="">Select College</option>
    <option value="">Select College</option>
    <option value="">Select College</option>
  </select>
</div>

<div class="col-md-2">
  <label class="control-label">Enrollment Year</label>
  <select name="enrollmentYear" id="yearNameId1" onchange="getClassesAndYear(this, 1)" class="form-control" multiple="multiple">
    <option value="">Select Year</option>
    <option value="">Select Year</option>
    <option value="">Select Year</option>
    <option value="">Select Year</option>
  </select>
</div>

<div class="col-md-2">
  <label class="control-label col-md-3">Class</label>
  <select id="classNameId1" class="form-control select2 classNameId" name="className" multiple>
    <option value="">Select Class</option>
    <option value="">Select Class</option>
    <option value="">Select Class</option>
  </select>
</div>