json onselect Show/Multi-Element-ID div verstecken

Question

Ich habe eine Tabelle wie diese

id - type - contact   - function 
--------------------------------------------------- 
10 - phone - 123/456789  - edit(button) 
21 - mail - info@example.com - edit(button) 
58 - phone - 456/789000  - edit(button) 

Auf EDIT-Taste klicken, um einen modalen Rahmen beginnen, die einen Code wie dieser

<div class="col-lg-6"> 
<label>type</label> 
<select name="contact_type" class="form-control" id="tipo_contatto_<?php echo $id; ?>"> 
    <option value="phone">phone</option> 
    <option value="Mail">Mail</option> 
</select> 
</div> 

<div class="col-lg-6" id="contatto_<?php echo $id; ?>"> 
<label>Contact</label> 
<input type="text" class="form-control" name="contact" value=""> 
</div> 

<div class="col-lg-2" id="prefisso_<?php echo $id; ?>"> 
<label>Prefix</label> 
<input type="text" class="form-control" name="prefix" value=""> 
</div> 

<div class="col-lg-4" id="numero_<?php echo $id; ?>"> 
<label>Number</label> 
<input type="text" class="form-control" name="number" value=""> 
</div> 

Dann habe ich möchte, dass am Telefon wählen Sie show div mit Vorwahl und Nummer, stattdessen Kontakt ...

Diese Lösung funktioniert mit 1 ID, aber mit dynamischen Multi-ID?

$('#contact').hide(); 
$('#contact_type').change(function(){ 
if ($('#contact_type').val() == 'Phone') { 
    $('#number').show(); 
    $('#prefix').show(); 
    $('#contact').hide(); 
} else { 
    $('#number').hide(); 
    $('#prefix').hide(); 
    $('#contact').show();    
} 
}); 

Answer 1

Sie die Elemente auf einem anderen Attribut basierte Auswahl in Erwägung ziehen könnte, im Gegensatz mit jQuery mit dem id Attribut wie unten zu sehen:

// Whenever a contact type element is changed 
$('[name="contact_type"]').change(function(){ 
    // Get the ID value for this row (appended to each element) by removing 
    // all non-digits from the ID 
    var id = $(this).attr('id').replace(/\D/g, ''); 
    // If it is phone, do something 
    if ($(this).val() == 'phone') { 
     $('#numero_' + id).show(); 
     $('#prefisso_' + id).show(); 
     $('#contatto_' + id).hide(); 
    } else { 
     $('#numero_' + id).hide(); 
     $('#prefisso_' + id).hide(); 
     $('#contatto_' + id).show();    
    } 
}); 

Beispiel

Sie see a working example of this here und demonstriert können

unten: