无法在此代码中获取 this.value

Unable to get this.value in this code

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> 的 ID 并在另一个 <div>.

中显示数据

最后一个问题是为什么我在这种情况下无法获得 this.id 的结果?

像这样创建选项元素,三个选项元素不需要 id,因为您在 option 上有 val 来识别它。

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

还有一件事 selectShow() 必须申请 select 而不是选项。

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

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

我以不同的方式修改了你的代码。

  • 使用 $.ajax() 提取一些随机 JSON 数据并解析它。
  • 已使用 $.each(var, function(index, value) {}) 遍历对象。
  • 使用 change() 事件记录 textvalid

其余的你可以在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>

您必须将 onchange 触发器放在 select 上。我建议您在 html 属性中添加带有 javascript no 的事件。您必须使用 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>