Question

我有一个基于JSON对象的下拉列表，其目的是渲染一个下拉框。

      var Regions = 
          {
            "ErrorInfo": {
                "Success": true,
                "ErrorCode": "",
                "Program": "",
                "Method": "",
                "Message": "",
                "Details": "",
                "StackTrace": "",
                "ErrorList": null
            },
            "Results": {
                "DimName": "region",
                "SubsetName": "",
                "Members": [{
                    "ID": "CEurope",
                    "Name": "Central Europe",
                    "Children": [],
                    "Hierarchy": [],
                    "Attributes": []
                },
                {
                    "ID": "SEurope",
                    "Name": "Southern Europe",
                    "Children": null,
                    "Hierarchy": [],
                    "Attributes": []
                }]
            }
        };

    //var htmlStr = '';
    var icount=0;
    var mySelect = $('#options');
    var optionsValues = '<select>';
    $.each(Regions, function(){
        optionsValues += '<option value="' + Regions.Results.Members[icount].ID + '">' + Regions.Results.Members[icount].Name + '</option>';
        icount=icount+1;
    });
    optionsValues += '</select>';
    var options = $('#options');
    options.replaceWith(optionsValues);

这是我的Javascript，它正在工作，但很高兴改进代码，以便我可以学习JS的更精细点。

My HTML is like this 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript &amp; jQuery - Chapter 13: Form Enhancement and Validation - Populate a selectbox</title>
    <link rel="stylesheet" href="css/c13.css" />
  </head>
  <body>
      <form name="howHeard" id="howHeard" action="/heard" method="post">
      <div id="page">
      </div>
      <div id="options">
      </div>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/124.js"></script>
    </body>
</html>

我的问题是如何检测下拉列表中的更改事件。

当我通过jquery javascript等迷宫学习时，任何帮助都会受到赞赏。

Cheerio

Answer 1

这应该这样做：

options.change(function() {
  alert( "It changed!" );
});

参考：https://api.jquery.com/change/

Answer 2

JS中的一些改进：

    //var icount=0; ->Not needed
    //var mySelect = $('#options'); ->Not needed
    var optionsValues = '<select id="mySelect">';
    $.each(Regions, function(index){
        optionsValues += '<option value="' + Regions.Results.Members[index].ID + '">' + Regions.Results.Members[index].Name + '</option>';
        //icount=icount+1;-> Not needed
    });
    optionsValues += '</select>';
    var options = $('#options');
    options.replaceWith(optionsValues);

基本上对于上面的设置，下面的代码应该有效：

$("#mySelect").on('change',function(){
       //do stuff here
});

或者如果它的动态元素下面肯定会起作用：

$(document).on('change',"#mySelect",function(){
       //do stuff here
});

<强>更新

<强> WORKING DEMO TO CLARIFY YOUR DOUBTS

对 JS ：

进行更多细化

var members=Regions.Results.Members; //Get all the members in a single variable
var optionsValues = '<select id="mySelect">';

//loop here for only member variables
$.each(members, function(index,value){
        optionsValues += '<option value="' + value.ID + '">' + value.Name + '</option>';
});

optionsValues += '</select>';
var options = $('#options');
options.replaceWith(optionsValues);

关于改变基于div的下拉jquery

2 个答案: