根据多个下拉框中的选择显示/隐藏文本框

Question

我有一个表格，其中一列下拉菜单的值为1 -5。当用户在任何一个框中选择一个小于三的值时，我想要一个弹出框出现在表下。对于任何数量小于3的下拉菜单，弹出窗口只需出现一次，而对于小于3的每个数值都不会出现一次。代码在分配<select id='purpose'>时起作用，但仅适用于第一个<select>。我如何让它们适用于所有人？使用

此功能：

$(document).ready(function(){ 
$('#purpose').on('change', function() { 
if (this.value < 3) 
{ 
$("#business").show(); 
} 
else 
{ 
$("#business").hide(); 
} 
}); 
}); 

片段的HTML：

         <td> 
            <select id='purpose'> 
             <option value="" selected="selected">Select...</option> 
             <option value="1">1</option> 
             <option value="2">2</option> 
             <option value="3">3</option> 
             <option value="4">4</option> 
             <option value="5">5</option> 
            </select> 
            </td> 
            <td> 
            <select id='purpose'> 
             <option value="" selected="selected">Select...</option> 
             <option value="1">1</option> 
             <option value="2">2</option> 
             <option value="3">3</option> 
             <option value="4">4</option> 
             <option value="5">5</option> 
            </select> 

... 

           </table> 
           <div style='display:none;' id='business'>          
            <input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." /> 
            <br/> 
           </div> 

Answer 1

每个select元件应该被分配给到相同class而不是同一id。然后，逻辑可以应用于所有类。

<td> 
    <select class="purpose"> 
    <option value="" selected="selected">Select...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option>  
    <option value="4">4</option> 
    <option value="5">5</option> 
    </select> 
</td>      
<td> 
    <select class="purpose"> 
    <option value="" selected="selected">Select...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option>  
    <option value="4">4</option> 
    <option value="5">5</option> 
    </select> 
</td> 

和适当的选择是：

$(document).ready(function(){ 
    $('.purpose').on('change', function() { 
    if (this.value < 3) { 
     $("#business").show(); 
    } else { 
     $("#business").hide(); 
    } 
    }); 
}); 

Answer 2

首先你应删除重复的ID。

对于任何数量小于3的下拉菜单，弹出窗口只需要出现一次，对于小于3的每一个数值都不会出现一次。代码在我分配时工作，但它只能在第一个。我如何让它们适用于所有人？

If you want the change event for work on both the both select you 
can just attach on select element. This will trigger the code for all 
select elements as below. 

$(document).ready(function(){ 
 
$('select').on('change', function() { 
 
if (this.value < 3) 
 
{ 
 
$("#business").show(); 
 
} 
 
else 
 
{ 
 
$("#business").hide(); 
 
} 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td> 
 
            <select > 
 
             <option value="" selected="selected">Select...</option> 
 
             <option value="1">1</option> 
 
             <option value="2">2</option> 
 
             <option value="3">3</option> 
 
             <option value="4">4</option> 
 
             <option value="5">5</option> 
 
            </select> 
 
            </td> 
 
            <td> 
 
            <select> 
 
             <option value="" selected="selected">Select...</option> 
 
             <option value="1">1</option> 
 
             <option value="2">2</option> 
 
             <option value="3">3</option> 
 
             <option value="4">4</option> 
 
             <option value="5">5</option> 
 
            </select> 
 

 
... 
 

 
           </table> 
 
           <div style='display:none;' id='business'>          
 
            <input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." /> 
 
            <br/> 
 
           </div>