Передать атрибут заголовка поля через onchange другое поле

Question

Вот мой код.

//I want to pass field1 selected option's title through onkeyup
function select_data(field1) {
  alert(field1);
}

<select id="field1" onchange="select_data(this.options[this.selectedIndex].title)">
  <option value="213" title="1">A</option>
  <option value="214" title="12">AB</option>
  <option value="215" title="13">AC</option>
</select>
<input type="text" id="vat" onkeyup="select_data()" />

Я хочу получить заголовок выбранной опции по onkeyup из текстового поля.

Заранее спасибо за помощь.

Answer 1

Вы хотите это:

<script>
//I want to pass field1 selected option's title through onkeyup
function select_data(field1) {
  //alert(field1);
  alert(field1.options[field1.selectedIndex].title);
}
</script>

<select id="field1" onchange="select_data(this.options[this.selectedIndex].title)">
  <option value="213" title="1">A</option>
  <option value="214" title="12">AB</option>
  <option value="215" title="13">AC</option>
</select>
<input type="text" id="vat" onkeyup="select_data(document.querySelector('#field1'))" />

Answer 2

Этого можно достичь, выбрав select внутри функции вместо передачи всего этого параметра встроенным HTML (что не рекомендуется). Таким образом, используйте querySelector() получить выбор, получить текущий выбранный индекс и заголовок, показать его.

Приведенный ниже метод можно вызывать из любого места, и он будет работать, поскольку вся работа по получению заголовка находится внутри функции

Примечание: Всегда, когда это возможно, избегайте слушатели в HTML, это не правильное место, и это также навязчиво и не легко поддерживать, выбирайте добавление слушателей в части JS / script, также избегайте передачи параметров в HTML встроенных слушателей.

//I want to pass field1 selected option's title through onkeyup
function select_data() {
  let select = document.querySelector("#field1")
  let title = select.options[select.selectedIndex].title;
  console.log(title)
}

<select id="field1" onchange="select_data()">
  <option value="213" title="1">A</option>
  <option value="214" title="12">AB</option>
  <option value="215" title="13">AC</option>
</select>
<input type="text" id="vat" onkeyup="select_data()" />

Answer 3

let selText = document.getElementById('field1').options[document.getElementById('field1').selectedIndex].title