CODEWITHSUNDEEP
javascriptjqueryhtml
Rupali
Rupali

Reputation: 93

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>

Upvotes: 0

Views: 203

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115202

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>

Upvotes: 1

Related Questions