raqulka raqulka - 6 months ago 15
HTML Question

text() doesn't append to second <span> on the same line

jQuery

text()
function does not append
option
from selection field to the
span
. I have two
select
fields in the same
div
. They are different and contain dynamically created numbers.

function myFunction(selector) {
var i;
for (i = 1; i <= 999; i++) {
var text = '00' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 3, 3));
}
}
//usage:
myFunction(document.getElementById("patient_code"));

$('#patsiendikoodi_label #patient_code ').change(function(i, text) {
var $this = $(this);
$this.prev().find('.patsiendikoodi_label_nr').text($(this).find('option:selected').text());
}).change();



function patsient(selector) {
var i;
for (i = 1; i <= 99; i++) {
var text = '0' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 2, 2));
}
}
//usage:
patsient(document.getElementById("patient_code2"));

$('#patsiendikoodi_label #patient_code2 ').change(function(i, text) {
var $this = $(this);
$this.prev().find('#patsiendi_kood').text($(this).find('option:selected').text());
console.log("WRITTEN");
}).change();


<div id="patsiendikoodi_label" class="col-sm-10">
<label class="control-label">Kood:</label>
<h4 style="color: #0DD31B; font-weight: bold;"><span id="ravimi_nimi"></span><?php foreach( $result as $row ){echo $row['user_code']; }?>- <span class="patsiendikoodi_label_nr"></span><span id="patsiendi_kood">-</span></h4>

<select data-placeholder="" id="patient_code" class="chosen-select form-control" tabindex="2">
</select>

<select data-placeholder="" id="patient_code2" class="chosen-select form-control" tabindex="2">
</select>

</div>




I am generating
option
values from the JavaScript. If I put the second
select
field in another div, it will append the selected option to the span. This picture should be better than my explanation.

enter image description here

But no matter what I do, it doesn't add the text.

Answer

In the second handler, prev() is finding the previous select element, not the h4 you want to search in.

Use prevAll('h4'); to find that element.

$('#patient_code2').change(function(i, text) {
  var $this = $(this);
  $this.prevAll('h4').find('#patsiendi_kood').text($(this).find('option:selected').text());
  console.log("WRITTEN");
}).change();

function myFunction(selector) {
    var i;
    for (i = 1; i <= 999; i++) {
      var text = '00' + i;
      selector.options[i - 1] = new Option(text.substr(text.length - 3, 3));
    }
  }
myFunction(document.getElementById("patient_code"));

$('#patient_code').change(function(i, text) {
  var $this = $(this);
  $this.prev().find('.patsiendikoodi_label_nr').text($(this).find('option:selected').text());
}).change();


function patsient(selector) {
    var i;
    for (i = 1; i <= 99; i++) {
      var text = '0' + i;
      selector.options[i - 1] = new Option(text.substr(text.length - 2, 2));
    }
  }
patsient(document.getElementById("patient_code2"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="patsiendikoodi_label" class="col-sm-10">
  <label class="control-label">Kood:</label>
  <h4 style="color: #0DD31B; font-weight: bold;"><span id="ravimi_nimi"></span><?php foreach( $result as $row ){echo $row['user_code']; }?>- <span class="patsiendikoodi_label_nr"></span><span id="patsiendi_kood">-</span></h4>

  <select data-placeholder="" id="patient_code" class="chosen-select form-control" tabindex="2">
  </select>

  <select data-placeholder="" id="patient_code2" class="chosen-select form-control" tabindex="2">
  </select>

</div>

Of course, since ids are unique in a document, you could really just say:

$('#patsiendi_kood').text( $(this).find('option:selected').text() );
Comments