无法在此代码中获取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 val上option来识别它时，在选项元素中不需要$('<option>').val(key).text(tvShow.name).appendTo('#show-select'); 。

selectShow()

select还需要申请<select onchange= "selectShow()"> </select> function selectShow(){ console.log($( "#show-select" ).val()); } 而不是选项。

utm

Answer 2

我以不同的方式重新编写了代码。

• 使用$.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>

Answer 3

您必须将onchange触发器放在select上。我建议你在html属性中用javascript no添加事件。您必须使用value代替id来分享值。

＆＃13;

＆＃13;

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)

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;