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>

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

2 个答案: