无法在此代码中获取 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> 的 id 并在另一个 <div> 中显示数据。

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

Answer 1

像这样创建选项元素，并且三个选项元素不需要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());
}

Answer 2

您必须将您的onchange 触发器放在您的select 上。我建议您在 html 属性中添加带有 javascript no 的事件。您必须使用 value 而不是 id 作为 sharing 值。

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

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

• 使用$.ajax() 拉取一些随机 JSON 数据并进行解析。
• 使用$.each(var, function(index, value) {}) 迭代对象。
• 使用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>