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

Question

我有一张桌子，上面有一排带有1 -5值的下拉菜单。 当用户在任何框上选择小于3的值时，我希望在表下方显示一个弹出框。 对于任何小于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>