जावास्क्रिप्ट और jquery का उपयोग करके, सरणी संरचना

Question

this question के उत्तरों का उपयोग करके, मैं किसी अन्य चयन बॉक्स के चयन के आधार पर एक चयन बॉक्स को पॉप्युलेट करने में सक्षम हूं। (I posted my answer here) एक सरणी संरचना से डेटा खींचकर सर्वर-साइड बनाया गया, जो .js फ़ाइल में संग्रहीत है और HTML पृष्ठ में संदर्भित है।

अब मैं एक तीसरा चयन बॉक्स जोड़ना चाहता हूं। अगर मैं डेटा के 3 सेट था (मॉडल, बनाने के लिए, विकल्प) इस (छद्म कोड) की तरह कुछ:

cars : [Honda[Accord[Lx, Dx]], [Civic[2dr, Hatchback]], 
    [Toyota[Camry[Blk, Red]], [Prius[2dr,4dr]] 

पूर्व: अगर होंडा चयन किया गया था, अगले सलेक्ट बॉक्स होता [एकॉर्ड सिविक] और यदि समझौते थे चयनित अगले सलेक्ट बॉक्स होता [Lx Dx]

मैं

1) एक सरणी संरचना डेटा रखने के लिए कैसे बना सकते हैं? ऐसी है कि

2) मैं अगले सलेक्ट बॉक्स के लिए आवश्यक मूल्यों को संदर्भित करने के

धन्यवाद

संपादित

एक का चयन बॉक्स के मान का उपयोग मैं निम्नलिखित बना सकते हैं सकता है, लेकिन एक तरह से संदर्भ है कि एक का चयन करें बॉक्स

var cars = [ 
{"makes" : "Honda", 
    "models" : [ 
    {'Accord' : ["2dr","4dr"]} , 
    {'CRV' : ["2dr","Hatchback"]} , 
    {'Pilot': ["base","superDuper"] } ] 
}, 
{"makes" :"Toyota", 
    "models" : [ 
    {'Prius' : ["green","reallyGreen"]} , 
    {'Camry' : ["sporty","square"]} , 
    {'Corolla' : ["cheap","superFly"] } ] 
} ] ;    

alert(cars[0].models[0].Accord[0]); ---> 2dr 

Answer 1

मैं इस तरह डेटा संरचना पसंद करते हैं:

var carMakers = [ 
    { name: 'Honda', models: [ 
      { name: 'Accord', features: ['2dr', '4dr'] }, 
      { name: 'CRV', features: ['2dr', 'Hatchback'] }, 
      { name: 'Pilot', features: ['base', 'superDuper'] } 
     ]}, 

    { name: 'Toyota', models: [ 
      { name: 'Prius', features: ['green', 'superGreen'] }, 
      { name: 'Camry', features: ['sporty', 'square'] }, 
      { name: 'Corolla', features: ['cheap', 'superFly'] } 
     ]} 
]; 

पहचान-पत्र के साथ तीन का चयन सूचियों को देखते हुए: 'निर्माता', 'मॉडल' और 'सुविधाओं' आप (इस के साथ उन्हें हेरफेर कर सकते हैं मेरा मानना ​​है कि यह बहुत आत्म है व्याख्यात्मक):

// returns array of elements whose 'prop' property is 'value' 
function filterByProperty(arr, prop, value) { 
    return $.grep(arr, function (item) { return item[prop] == value }); 
} 

// populates select list from array of items given as objects: { name: 'text', value: 'value' } 
function populateSelect(el, items) { 
    el.options.length = 0; 
    if (items.length > 0) 
     el.options[0] = new Option('please select', ''); 

    $.each(items, function() { 
     el.options[el.options.length] = new Option(this.name, this.value); 
    }); 
} 

// initialization 
$(document).ready(function() { 
    // populating 1st select list 
    populateSelect($('#maker').get(0), $.map(carMakers, function(maker) { return { name: maker.name, value: maker.name} })); 

    // populating 2nd select list 
    $('#maker').bind('change', function() { 
     var makerName = this.value, 
      carMaker = filterByProperty(carMakers, 'name', makerName), 
      models = []; 

     if (carMaker.length > 0) 
      models = $.map(carMaker[0].models, function(model) { return { name: model.name, value: makerName + '.' + model.name} }); 

     populateSelect($('#model').get(0), models); 
     $('#model').trigger('change'); 
    }); 

    // populating 3rd select list 
    $('#model').bind('change', function() { 
     var nameAndModel = this.value.split('.'), 
      features = []; 

     if (2 == nameAndModel.length) { 
      var makerName = nameAndModel[0], 
       carModel = nameAndModel[1], 
       carMaker = filterByProperty(carMakers, 'name', makerName); 

      if (carMaker.length > 0) { 
       var model = filterByProperty(carMaker[0].models, 'name', carModel) 

       if (model.length > 0) 
        features = $.map(model[0].features, function(feature) { return { name: feature, value: makerName + '.' + carModel + '.' + feature} }) 
      } 
     } 

     populateSelect($('#feature').get(0), features); 
    }) 

    // alerting value on 3rd select list change 
    $('#feature').bind('change', function() { 
     if (this.value.length > 0) 
      alert(this.value); 
    }) 
}); 

Answer 2

आप श पॉप्युलेट करने में मदद मिलेगी को समझ नहीं सकता चयन बॉक्स मैनिपुलेशन के लिए here पर एक नज़र डालें। जो आप चाहते हैं, मुझे लगता है कि JSON आपके लिए सही काम करेगा। वैसे भी, अगर मैं आप थे, तो मैं इस तरह से करूँगा: जब मैं पहले चयन करता हूं, तो मैं एक AJAX अनुरोध करता हूं। AJAX प्रतिक्रिया के साथ, मैं दूसरे बॉक्स populate जाएगा। दूसरे बॉक्स के लिए वही है और आपके पास सही डेटा के साथ आबादी वाला तीसरा बॉक्स है।

Answer 3

@Marko Dunic से जवाब देने के लिए धन्यवाद, मैं एक सरणी (डेटा) संरचना है कि 3 का चयन करें बॉक्स को भरने के लिए संदर्भित किया जा सकता का निर्माण करने में सक्षम था। मैंने केवल कार्यान्वयन कोड का उपयोग नहीं किया क्योंकि मैंने इसे पूरी तरह से समझ नहीं लिया ... यह पोस्ट के रूप में काम करता है। जैसे ही मैं jQuery सीखता हूं, मैं बाद में इस कोड पर वापस आऊंगा। मेरे कोड के नीचे पोस्ट किया जाता है (जाहिर है, jQuery के लिए अपने संदर्भ के अलग हो सकता है)

<html><head> 
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script> 
<script type="text/JavaScript"> 
var cars = [ 
{ name: 'Honda', models: [ 
{ name: 'Accord', features: ['2dr', '4dr'] }, 
{ name: 'CRV', features: ['2dr', 'Hatchback'] }, 
{ name: 'Pilot', features: ['base', 'superDuper'] } 
    ]}, 
{ name: 'Toyota', models: [ 
{ name: 'Prius', features: ['green', 'superGreen'] }, 
{ name: 'Camry', features: ['sporty', 'square'] }, 
{ name: 'Corolla', features: ['cheap', 'superFly'] } 
    ] 
} 
]; 
$(function() { 
var options = '' ; 
for (var i = 0; i < cars.length; i++) { 
    var opt = cars[i].name ; 
    if (i == 0){ options += '<option selected value="' + opt + '">' + opt + '</option>'; } 
    else {options += '<option value="' + opt + '">' + opt + '</option>'; } 
} 
$("#maker").html(options); // populate select box with array 

var options = '' ; 
for (var i=0; i < cars[0].models.length; i++) { 
    var opt = cars[0].models[0].name ; 
    if (i==0){options += '<option selected value="' + opt + '">' + opt + '</option>';} 
    else {options += '<option value="' + opt + '">' + opt + '</option>';} 
} 
$("#model").html(options); // populate select box with array 

var options = '' ; 
for (var i=0; i < cars[0].models[0].features.length; i++) { 
    var opt = cars[0].models[0].features[i] ; 
    if (i==0){options += '<option selected value="' + opt + '">' + opt + '</option>';} 
    else {options += '<option value="' + opt + '">' + opt + '</option>';} 
} 
$("#feature").html(options); // populate select box with array 

$("#maker").bind("click", 
    function() { 
     $("#model").children().remove() ;  // clear select box 
     for(var i=0; i<cars.length; i++) { 
      if (cars[i].name == this.value) { 
       var options = '' ; 
       for (var j=0; j < cars[i].models.length; j++) { 
        var opt= cars[i].models[j].name ; 
        if (j==0) {options += '<option selected value="' + opt + '">' + opt + '</option>';} 
        else {options += '<option value="' + opt + '">' + opt + '</option>';} 
       } 
       break; 
      } 
     } 
     $("#model").html(options); // populate select box with array 

     $("#feature").children().remove() ;  // clear select box 
     for(var i=0; i<cars.length; i++) { 
      for(var j=0; j<cars[i].models.length; j++) { 
       if(cars[i].models[j].name == $("#model").val()) { 
        var options = '' ; 
        for (var k=0; k < cars[i].models[j].features.length; k++) { 
         var opt = cars[i].models[j].features[k] ; 
         if (k==0){options += '<option selected value="' + opt + '">' + opt + '</option>';} 
         else {options += '<option value="' + opt + '">' + opt + '</option>';} 
        } 
        break; 
       } 
      } 
     } 
     $("#feature").html(options); // populate select box with array 
    }); 

    $("#model").bind("click", 
     function() { 
      $("#feature").children().remove() ;  // clear select box 
      for(var i=0; i<cars.length; i++) { 
       for(var j=0; j<cars[i].models.length; j++) { 
        if(cars[i].models[j].name == this.value) { 
         var options = '' ; 
         for (var k=0; k < cars[i].models[j].features.length; k++) { 
          var opt = cars[i].models[j].features[k] ; 
          if (k==0){options += '<option selected value="' + opt + '">' + opt + '</option>';} 
          else {options += '<option value="' + opt + '">' + opt + '</option>';} 
         } 
         break ; 
        } 
       } 
      } 
      $("#feature").html(options); // populate select box with array 
    }); 
}); 
</script> 
</head> <body> 
<div id="selection"> 
<select id="maker"size="10" style="{width=75px}"></select> 
<select id="model" size="10" style="{width=75px}"></select> 
<select id="feature" size="10"style="{width=75px}"></select> 
</div></body></html> 

Answer 4

मैं वास्तव में @Marko Dunic द्वारा समाधान पसंद है, लेकिन यह विकल्प को आईडी संलग्न के लिए मेरी जरूरतों को पूरा नहीं किया। एक बार जब मैंने आईडी संलग्न की, तो मुझे एहसास हुआ कि मैं जेएस कोड को भी छोटा और सरल बना सकता हूं। मेरा समाधान तब डिज़ाइन किया गया है जब डेटा एक संबंधपरक डेटाबेस से आता है, और JSON इनपुट डेटा प्राथमिक/विदेशी कुंजी के साथ संबंधपरक संरचना को बरकरार रखता है।

<html lang="en"> 
    <head> 
    <title>Populate a select dropdown list with jQuery - WebDev Ingredients</title> 
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
    <script type="text/javascript"> 
     var types = [ 
      { typeID: 1, name: 'Domestic'}, 
      { typeID: 2, name: 'Import'}, 
      { typeID: 3, name: 'Boat'} 
     ] 
     var makes = [ 
      { typeID: 1, makeID: 1, name: 'Chevy'}, 
      { typeID: 1, makeID: 2, name: 'Ford'}, 
      { typeID: 1, makeID: 3, name: 'Delorean'}, 
      { typeID: 2, makeID: 4, name: 'Honda'}, 
      { typeID: 2, makeID: 5, name: 'Toyota'}, 
      { typeID: 2, makeID: 6, name: 'Saab'} 
     ]  
     var model = [ 
      { makeID: 1, modelID: 1, name: 'Camaro'}, 
      { makeID: 1, modelID: 2, name: 'Chevelle'}, 
      { makeID: 1, modelID: 3, name: 'Nova'}, 
      { makeID: 2, modelID: 4, name: 'Focus'}, 
      { makeID: 2, modelID: 5, name: 'Galaxie'}, 
      { makeID: 2, modelID: 6, name: 'Mustang'}, 
      { makeID: 4, modelID: 7, name: 'Accord'}, 
      { makeID: 4, modelID: 8, name: 'Civic'}, 
      { makeID: 4, modelID: 9, name: 'Odyssey'}, 
      { makeID: 5, modelID: 10, name: 'Camry'}, 
      { makeID: 5, modelID: 11, name: 'Corolla'} 
     ] 
     // 
     // Put this in a stand alone .js file 
     // 
     // returns array of elements whose 'prop' property is 'value' 
     function filterByProperty(arr, prop, value) { 
      return $.grep(arr, function (item) { return item[prop] == value }); 
     } 
     // populates select list from array of items given as objects: { name: 'text', value: 'value' } 
     function populateSelect(el, items) { 
      el.options.length = 0; 
      if (items.length > 0) 
       el.options[0] = new Option('please select', ''); 
      $.each(items, function() { 
       el.options[el.options.length] = new Option(this.name, this.value); 
      }); 
     } 
     // initialization 
     $(document).ready(function() { 
      // populating 1st select list 
      populateSelect($('#sType').get(0), $.map(types, function(type) { return { name: type.name, value: type.typeID} }));  
      // populating 2nd select list 
      $('#sType').bind('change', function() { 
       var theModels = filterByProperty(makes, 'typeID', this.value); 
       populateSelect($('#sMake').get(0), $.map(theModels, function(make) { return { name: make.name, value: make.makeID} })); 
       $('#sMake').trigger('change'); 
      }); 
      // populating 3nd select list 
      $('#sMake').bind('change', function() { 
       var theSeries = filterByProperty(model, 'makeID', this.value); 
       populateSelect($('#sModel').get(0), $.map(theSeries, function(model) { return { name: model.name, value: model.modelID} })); 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
    Enter values, click submit, and look at the post parameters 
    <form method="get" action="index.php"> 
      <div id="selection"> 
       <select id="sType" name="type_id" style="{width=75px}"></select> 
       <select id="sMake" name="make_id" style="{width=75px}"></select> 
       <select id="sModel" name="model_id" style="{width=75px}"></select> 
      </div> 
      <input type="submit"> 
    </form> 
    </body> 
</html> 

सूचना है कि मेरे समाधान कार्यक्षमता बदलाव ताकि मेकअप मॉडल 2 और 3 पाठ बक्से, और प्रकार (घरेलू, आयात, नाव, आदि) स्तर 1 हैं: यहाँ JSON डेटा है।अच्छा फॉर्मेटिंग बनाए रखने के दौरान मुझे बॉयलरप्लेट जेएस 23 लाइनों (कम टिप्पणियों) तक मिला।

जेएसओएन डेटा एसक्यूएल प्रश्नों से प्रस्तुत करना बहुत आसान है, जो जावा लिस्ट में इनिट पर कैश किए जाते हैं क्योंकि टाइप-मेक-मॉडल शायद ही कभी बदलता है। मैं किसी गतिशील AJAX का उपयोग नहीं करता क्योंकि यह आर्किटेक्चर को जटिल बनाता है, और मेरे पास उपलब्ध मूल्यों की अपेक्षाकृत छोटी सूची है, इसलिए मैं इसे पृष्ठ अनुरोध पर भेजता हूं।

"समाधान जितना संभव हो सके सरल होना चाहिए, लेकिन कोई आसान नहीं होना चाहिए" - ए आइंस्टीन