text() 不会附加到同一行的第二个 <span>

Question

jQuery text() 函数不会将 option 从选择字段附加到 span。我在同一个div 中有两个select 字段。它们是不同的并且包含动态创建的数字。

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>

我正在从 JavaScript 生成 option 值。如果我将第二个 select 字段放在另一个 div 中，它会将所选选项附加到跨度。这张图应该比我的解释好。

但无论我做什么，它都不会添加文本。

Answer 1

在第二个处理程序中，prev() 正在查找前一个 select 元素，而不是您想要搜索的 h4。

使用prevAll('h4'); 查找该元素。

$('#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>

当然，由于ids 在文档中是唯一的，你真的可以说：

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