json onselect show/hide 多id div 元素

Question

我有一个table这样的

id - type   - contact          - function
---------------------------------------------------
10 - phone  - 123/456789       - edit(button)
21 - mail   - info@example.com - 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>

然后我希望在 phone select 上显示带有前缀和数字的 div，而不是联系...

此解决方案适用于 1 个 ID，但适用于动态多 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

您可以考虑使用 jQuery 根据其他属性选择元素，而不是使用 id 属性，如下所示：

// 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并在下面进行演示：

json onselect show/hide 多id div 元素

json onselect show/hide multi id div element

jquery

json

onselect