Den Wert des Arrays für ein anderes Array verwenden

Question

Ich möchte, dass der Benutzer einen "Bundesland/Bundesland" aus dem ersten Dropdown auswählt, dann die angegebenen Gebiete in diesem Bundesland/Bundesland, aber ich möchte ein "anderes" in das zweite hinzufügen Dropdown für Bereiche, die nicht aufgelistet sind, aber wenn der Benutzer "andere" auswählt, möchte ich, dass das Eingabefeld angezeigt wird.

Ich bin ziemlich neu in js und ich habe ein kleines Problem, das ich nicht beheben kann. Entschuldigung, wenn es gefragt wird, aber ich habe versucht, ein ähnliches Problem ohne Erfolg zu finden. Auch ich konnte das nicht an jsfiddle arbeiten, also entschuldige ich mich für den langen Beitrag.

Die meisten der Optionen deaktiviert (immer noch ein work in progress)

Ich habe ein funktionierendes Beispiel von dem, was ich hier tun wollen:

Betrachten Sie bitte den Code-Schnipsel.

function filterDropDownLists(provinces, cityfilter) { 
 
     var city1= new Array('Please Select Area','Example 1', 'Example 2', 'Example 3'); 
 
     
 
/*values for second dropdown*/ 
 

 
/*if one of these optios are selected, display specified array above*/ 
 
     switch (provinces.value) { 
 
      case 'Gauteng': 
 
       cityfilter.options.length = 0; 
 
       for (i = 0; i < city1.length; i++) { 
 
        createOption(cityfilter, city1[i], city1[i]); 
 
       } 
 
       break; 
 

 
      default: 
 
       cityfilter.options.length = 1;     
 
     } 
 

 
    } 
 

 
function createOption(provincefilter, text, value) { /*add the values to the next dropdown */ 
 
     var opt = document.createElement('option'); 
 
     opt.value = value; 
 
     opt.text = text; 
 
     provincefilter.options.add(opt); 
 
    } 
 

 
\t 
 
\t

<select class="provincefilter" id="provincefilter" onchange="filterDropDownLists(this,document.getElementById('cityfilter'))"> 
 
\t \t \t \t <option value="selectprovince" selected>Please Select Province</option> 
 
\t \t \t \t <option value="Gauteng">Gauteng</option> 
 

 
\t \t \t </select> 
 

 

 
\t \t \t <select class="cityfilter" id="cityfilter"> <!--second dropdown to list specified array--> 
 
\t \t \t \t <option value="selectarea" selected>Please Select Area</option> 
 
\t \t \t 
 
\t \t \t </select>

Aber die, die ich mit einem Problem habe verwendet eine Anordnung, um die Werte einzufügen. Was ich will, ist für die Person, um etwas in der ersten, dann zeigt es bestimmte Werte für die Sekunde, aber für die Sekunde gibt es eine Option von 'anderen', ich möchte ein Eingabefeld daneben, falls ' ‚andere wurde ausgewählt

Problem:

function filterDropDownLists_rblock(provinces, cityfilter) { \t \t 
 
\t \t var gauteng = new Array('Please Select Area','Pretoria East', 'Pretoria North', 'Pretoria Central', 'Johannesburg', 'Midrand', 'Centurion','Other'); 
 
     var easterncape = new Array('Please Select Area','Port Elizabeth', 'Durban','Other'); 
 
\t \t var freestate = new Array('Please Select Area','Louis Trichardt','Other'); 
 
\t \t 
 
\t \t 
 

 
     switch (provinces.value) { 
 
      case 'Gauteng': 
 
       cityfilter.options.length = 0; 
 
       for (i = 0; i < gauteng.length; i++) { 
 
        createOption(cityfilter, gauteng[i], gauteng[i]); 
 
       } 
 
       break; 
 
      default: 
 
       cityfilter.options.length = 1;     
 
     } 
 

 
    } 
 

 
function createOption(provincefilter, text, value) { 
 
     var opt = document.createElement('option'); 
 
     opt.value = value; 
 
     opt.text = text; 
 
     provincefilter.options.add(opt); 
 
    } 
 

 
function city_other_select(otherCitySelect) 
 
{ 
 
    if(otherCitySelect){ 
 
     otherCityOptionValue = document.getElementById("city_option_other").value; 
 
     if(otherCityOptionValue == otherCitySelect.value){ 
 
      document.getElementById("rblock_area_other").style.display = "inline-block"; 
 
     } 
 
     else{ 
 
      document.getElementById("rblock_area_other").style.display = "none"; 
 
     } 
 
    } 
 
    else{ 
 
     document.getElementById("rblock_area_other").style.display = "none"; 
 
    } 
 
}

<div class="rblock_business_area"> 
 
\t \t \t <select class="rblock_provincefilter" id="rblock_provincefilter" onchange="filterDropDownLists_rblock(this,document.getElementById('rblock_cityfilter'))"> 
 
\t \t \t \t <option value="selectprovince" selected>Please Select Province</option> 
 
\t \t \t \t <option value="Gauteng">Gauteng</option> 
 
\t \t \t </select> 
 

 
\t \t \t <select class="rblock_cityfilter" id="rblock_cityfilter" onchange="city_other_select(this)"> 
 
\t \t \t \t <option value="rblock_selectarea" selected>Please Select Area</option> 
 
\t \t \t \t <option value="city_option_other" id="city_option_other">Other</option> 
 
\t \t \t </select> 
 
    
 
\t \t \t <div class="rblock_area_other" style="display:none;"> 
 
\t \t \t \t <input type=text name=areaother size="30px" placeholder="Please specify"/> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

Ich glaube, Sie könnten eine ‚klare Sicht‘ auf diese erhalten wenn Sie Ihre Daten von Ihrer Präsentationsebene trennen und nur die Logik damit arbeiten lässt. Also habe ich ein Objekt mit province und area Eigenschaften erstellt.

Die Event-Handler müssen dann nur die verschiedenen <select> Elemente löschen, filtern und befüllen.

Geben Sie diesen einen Versuch:

var data = [ 
 
    {"province": "Gauteng", "area": "Pretoria East"}, 
 
    {"province": "Gauteng", "area": "Pretoria North"}, 
 
    {"province": "Gauteng", "area": "Pretoria Central"}, 
 
    {"province": "Gauteng", "area": "Johannesburg"}, 
 
    {"province": "Gauteng", "area": "Midrand"}, 
 
    {"province": "Gauteng", "area": "Centurion"}, 
 
    {"province": "Sydney", "area": "Surry Hills"}, 
 
    {"province": "Sydney", "area": "Redfern"}, 
 
    {"province": "Sydney", "area": "Bondi"} 
 
]; 
 

 
$('#provinceFilter').append('<option selected>Please select province</option>'); 
 
$('#areaFilter').append('<option selected>Please select area</option>'); 
 
$('#otherSelection').hide(); 
 

 
var provinces = []; 
 
$.each(data, function(index, item) { 
 
    if (provinces.indexOf(item.province) < 0) { 
 
    provinces.push(item.province); 
 
    }; 
 
}); 
 

 
$.each(provinces, function(index, item) { 
 
    $('#provinceFilter').append('<option value=' + item + '>' + item + '</option>'); 
 
}); 
 

 
$('#provinceFilter').on('change', function() { 
 
    $('#areaFilter').empty(); 
 
    var areas = []; 
 
    $.each(data, function(index, item) { 
 
    if (areas.indexOf(item.area) < 0 && $('#provinceFilter').val() == item.province) { 
 
     areas.push(item.area); 
 
    }; 
 
    }); 
 
    $.each(areas, function(index, item) { 
 
    $('#areaFilter').append('<option value=' + item + '>' + item + '</option>'); 
 
    }); 
 
    $('#areaFilter').append('<option value=Other>Other</option>'); 
 
}); 
 

 
$('#areaFilter').on('change', function() { 
 
    var area = $('#areaFilter').val(); 
 
    if (area == 'Other') { 
 
    $('#otherSelection').show(); 
 
    $('#otherSelection').val('Which area?'); 
 
    $('#otherSelection').focus(); 
 
    } else { 
 
    $('#otherSelection').hide(); 
 
    $('#otherSelection').val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    <select id="provinceFilter"> 
 
    </select> 
 
    <select id="areaFilter"> 
 
    </select> 
 
    <input id="otherSelection" /> 
 
</div>

Answer 2

Sie müssen das Änderungsereignis auf den select und auf Änderungsprüfung für other und zeigen das input Element definieren.

Für die ersten ein input mit hide wie folgt hinzufügen,

<input type="text" id="otherInput" name="other" class="hide"/> 

Und change Ereignis bei der Auswahl wie folgt hinzufügen,

cityfilter.addEventListener('change', function(){ 

     if(cityfilter.value == "other") 
     { 
      document.getElementById("otherInput").className = ""; 
     } 
    });