根據從多個下拉框中的選擇顯示/隱藏文本框

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>