Javascript 基于div的下拉jquery的变化_Javascript_Jquery_Html

Javascript 基于div的下拉jquery的变化

javascript jquery html

Javascript 基于div的下拉jquery的变化,javascript,jquery,html,Javascript,Jquery,Html,我有一个基于JSON对象的下拉列表，其目的是呈现一个下拉框 var Regions = { "ErrorInfo": { "Success": true, "ErrorCode": "", "Program": "", "Method": "", "Message": "",

我有一个基于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);

var区域=
{
“错误信息”：{
“成功”：没错，
“错误代码”：“”，
“程序”：“，
“方法”：“，
“电文”：“，
“详情”：“，
“StackTrace”：“，
“错误列表”：空
},
“结果”：{
“DimName”：“区域”，
“子名称”：“，
“成员”：[{
“ID”：“CEurope”，
“名称”：“中欧”，
“儿童”：[…]，
“层次结构”：[]，
“属性”：[]
},
{
“ID”：“SEurope”，
“名称”：“南欧”，
“Children”：空，
“层次结构”：[]，
“属性”：[]
}]
}
};
//var htmlStr=''；
var-icount=0；
var mySelect=$（'选项'）；
var optionsValues=''；
$.each（区域，函数（）{
optionsValues+=''+Regions.Results.Members[icount].Name+''；
icount=icount+1；
});
选项值+=''；
var options=$（“#options”）；
选项。替换为（选项值）；

这是我的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>

我的HTML是这样的
JavaScript&；jQuery-第13章：表单增强和验证-填充选择框

我的问题是如何检测下拉列表中的on change事件

当我通过jquery javascript等迷宫学习时，任何帮助都将不胜感激

干杯这应该可以做到：

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

参考：

您的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);

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

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

更新

对您的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);

var members=Regions.Results.members//在单个变量中获取所有成员 var optionsValues=''； //在此处循环仅用于成员变量 $.each（成员、函数（索引、值）{ 选项VALUES+=''+值。名称+''； }); 选项值+=''； var options=$（“#options”）；选项。替换为（选项值）；
如果您的问题已经得到回答，请接受回答。
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);