Question

我有一张这样的表

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>

然后我想在手机上选择带有前缀和数字的show 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();               
   } 
});

示例

你可以https://msdn.microsoft.com/it-it/library/dn956974.aspx#Anchor_3]并在下面演示：

see a working example of this here

json onselect显示/隐藏多id div元素

1 个答案: