2015-05-27 2 views
0

У меня есть раскрывающийся список, основанный на объекте JSON, и цель этого - отобразить раскрывающийся список.об изменении div на основе выпадающего jQuery

 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

ответ

0

Это следует сделать это:

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

исх: https://api.jquery.com/change/

+0

Спасибо Mate. –

+0

Просьба принять ответ, если на ваш вопрос был дан ответ. – kspearrin

0

Некоторые уточнения в вашем 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 
}); 

UPDATE

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); 
Смежные вопросы