2016-05-04 13 views
0

を隠す私はEDITボタンでこのJSON ONSELECTショー/マルチのidのdiv要素

id - type - contact   - function 
--------------------------------------------------- 
10 - phone - 123/456789  - edit(button) 
21 - mail - [email protected] - edit(button) 
58 - phone - 456/789000  - edit(button) 

のようなテーブルを持っているこの

<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> 

のようなコードを持っているモーダルフレームの開始]をクリックしますそれから私はそれをしたいです電話でプレフィックスと番号でshow divを選択してください...

このソリューションは1 idで動作しますが、動的マルチIDで動作しますか?下図のようにあなたがid属性を使用するのではなく、jQueryのを使用して、いくつかの他の属性に基づいて要素を選択検討することもでき

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

答えて

1

// 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();    
    } 
}); 

することはできsee a working example of this hereと実証しました以下:

enter image description here