Невозможно получить this.value в этом коде

Question

function showData(){
  Object.keys(JSONcall).forEach(function(key){
    var tvShow = JSONcall[key].show;
    $('#show-select').append("<option class=\"selectS\"" + 
      "id=\"" + key + "\"" + "value=\"JSONcall[" + key + "]
      .show\" onchange=\"selectShow(this.id)\">" + tvShow.name + "</option>");
  });
}

Здравствуйте, у меня есть цикл forEach, в котором функция должна добавлять результаты объекта JSON.После добавления получается результат:

<option class="selectS" id="0" value="JSONcall[0].show" 
   onchange="selectShow(this.id)">Some Value</option>

Первый вопрос: разумно ли добавлять onchange=(function()) подобным образом?

selectShow(value) - это функция, предназначенная для получения идентификатора <option> иотобразить данные в другом <div>.

Последний вопрос: почему я не могу получить результаты this.id в этом контексте?

Answer 1

Я переработал ваш код по-другому.

• Использовал $.ajax(), чтобы получить некоторые случайные данные JSON и проанализировать их.
• Использовал $.each(var, function(index, value) {}) для итерации поobject.
• Используется change() событие для записи text, val, id

Остальное вы можете изменить внутри append() метода.

function showData() {
  $.ajax({
    url: "https://www.json-generator.com/api/json/get/bHepFCoNmG?indent=2",
    success: function(data) {
      $.each(data, (i, val) => {
        $("#mySelect").append('<option class="selectS" id="' + i + '" value="' + val.name + '">' + val.name + '</option>');
      });
    }
  });
}

// change event
$('#mySelect').change(function() {
  console.log($(this).find(':selected').text());
  console.log($(this).find(':selected').val());
  console.log($(this).find(':selected').attr("id"));
});

showData();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="mySelect">
  
  </select>
</div>

---

Приведенный ниже код показывает, как использовать jQuery.data() для решения той же проблемы:

//TODO: Add triggers and events

function showData() {
	// Retrieve JSON file from website
  $.ajax({
  	
    // Returns 15 rows
    url: "https://www.json-generator.com/api/json/get/cuScfPsQRK?indent=2",
    success: function(data) {
    
    	// Iterate retrieved JSON Object
      $.each(data, (i, val) => {

        // Get JSON keys
        let key   = val.key;
        let value = val.value;

        // Define metadata object
        let metaData = JSON.stringify({
          index : i,
          key   : key,
          value : value
        })

        // Create template & pass configuration object
        $('<option></option>', {
          id          : i,
          text        : key,
          value       : value,
          class       : "selectS",
          'data-meta' : metaData
        }).appendTo('#mySelect');
      });
    }
  });
}

$('#mySelect').change(function() {
	// Get data('meta') keys
  let index = $(this).find(':selected').data('meta').index;
  let key   = $(this).find(':selected').data('meta').key;
  let value = $(this).find(':selected').data('meta').value;
  
  $("#dataId").text(index);
  $("#dataKey").text(key);
  $("#dataValue").text(value);

  // Using template literals
  //console.log(`================\nID: ${index}\nKey: ${key}\nValue: ${value}\n================`);
});

showData();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Select a Person:</h3>

<hr>

<select id="mySelect">
  
</select>

<hr>

<div id="data">
  Index:
  <span id="dataId">N/A</span><br>
  
  Key:
  <span id="dataKey">N/A</span><br>
  
  Value:
  <span id="dataValue">N/A</span>
</div>

Answer 2

Вы должны поставить свой onchange триггер на select.Я советую вам добавить событие с javascript нет в атрибуте html.Вы должны использовать value вместо id для совместного использования значения.

const obj = {
  channel1: {
    show: {
      id: "#ch1",
      name: "ch1"
    }
  },
  channel2: {
    show: {
      id: "#ch2",
      name: "ch2"
    }
  }
};

function showData() {
  $.each(obj, function(key, value) {
    const tvShow = value.show; // obj[key] === value
    $("<option></option")
      .addClass("selectS")
      .val(key)
      .text(tvShow.name)
      .appendTo("#show-select");
  });
}

function selectShow() {
  console.log($(this).val());
}

showData();
$("#show-select").on("change", selectShow)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="show-select"></select>

Answer 3

создайте элемент опции, подобный этому, и три не нужно id в элементе опции, поскольку у вас есть val на option для его идентификации.

$('<option>').val(key).text(tvShow.name).appendTo('#show-select');

еще одна вещь selectShow() необходимо применить к select, а не к варианту.

<select onchange= "selectShow()"> </select>

function selectShow(){
  console.log($( "#show-select" ).val());
}