基于下拉显示/隐藏动态文本框

Question

我想弄清楚如何让jQuery基于下拉菜单选择显示/隐藏动态生成的文本框。我的JS技能非常有限。我有以下的在while循环创建，取决于人的数量：

<select name="location[<?=$pid?>]" id="location[<?=$pid?>]"> 
<option value="<?=$loc_id?>" selected><?=$loc_name?> </option> 
<option value="Other">Other</option> 
<option value="Other">--------</option> 
<? $query_loc = mysqli_query($link, "SELECT * FROM locations WHERE loc_app = 'Y' ORDER BY loc_name ASC"); 
while($fetch_loc = mysqli_fetch_array($query_loc)){ 
    $loc_id = $fetch_loc['loc_id']; 
    $loc_name = $fetch_loc['loc_name']; 
    ?> 
    <option value="<?=$loc_id?>"><?=$loc_name?></option> 
    <? 
} ?> 
</select> 
<input name="location_other[<?=$pid?>]" type="text" id="location_other[<?=$pid?>]" style="display:none" /> 

jQuery函数：

<script type='text/javascript'> 
$(window).load(function(){ 
    $('#location').change(function() { 
     if ($(this).val() == "Other") { 
      $('#location_other').show(); 
     } else { 
      $('#location_other').hide(); 
     } 
    }); 
}); 
</script> 

我需要保持的id和与$ PID变量序列化供以后处理。有没有另一种方法来调用这些jQuery的功能？

的HTML输出如下：

<select name="location[287]" id="location[287]"> 
     <option value="1" selected>A</option> 
     <option value="Other">Other</option> 
     <option value="Other">--------</option> 
     <option value="12">B</option> 
     <option value="12">C</option>    
     </select> 
     <input name="location_other[287]" type="text" id="location_other[287]" style="display:none" /> 

Answer 1

尝试

$(window).load(function(){ 
    $('#location').change(function() { 
     $('input[id^=location_other]').hide(); 
     if ($(this).val() == "Other") { 
      $('#location_other').show(); 
     } else { 
      $('#location_other' + $(this).val()).hide(); 
     } 
    }); 
}); 

Answer 2

试试这个

<select name="location[287]" id="location[287]"> 
    <option value="Other">Other</option> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
</select> 
<input name="location_other[287]" type="text" id="location_other" style="display:none" /> 


<script type='text/javascript'> 
    $(window).load(function() { 
     if ($('select[id^="location"]').val() == "Other") { 
      $('#location_other').show(); 
     } else { 
      $('#location_other').hide(); 
     } 

     $('select[id^="location"]').change(function() { 
      if ($(this).val() == "Other") { 
       $('#location_other').show(); 
      } else { 
       $('#location_other').hide(); 
      } 
     }); 
    }); 
</script>