隐藏/显示字段基于PHP同时在JQuery中循环下拉

Question

我在PHP foreach循环中有数据数组，并且brand_new[]数据（ tr ）我都有一个下拉字段，我将其命名为brand_new[] ，该下拉字段将显示/隐藏我的account_no字段，由于style='display:none' ，该字段暂时隐藏了style='display:none' ，当用户选择brand_new ， account_no字段将隐藏，当用户选择repo ， account_no将显示。

到目前为止，这是我所做的。

PHP

  foreach ($result as $r) {
      echo "<tr>
               <td align='center'>$r->model</td>    
               <td align='center'>$r->color</td>
               <td align='center'>$r->engine_no</td>
               <td align='center'>$r->chassis_no</td>
               <td align='center'>                   
                  <select class='new' name='brand_new[]'>
                    <option>Choose</option>
                    <option value='brand_new'>Brand New</option>
                    <option value='repo'>Repo</option>
                    </select> 
                 </td>
               <td> 
                 <div id='repo' class='search_item' style='display:none'>    
                        <input type='text' name='account_no' required> 
                     </div>
                </td>

             </tr>
         ";
       }

使用Javascript

<script type="text/javascript">

  $(document).ready(function() {

    // Search by dates function
    var search = $('.new')

    search.change(function() {
        $('.search_item').hide()
        $('#' + $(this).val()).show() 

    });

  });

</script>

查看页面源代码

<table class="table">
    <thead>
      <tr>
        <th class="text-center"><h4>Model</h4></th>
        <th class="text-center"><h4>Color</h4></th>
        <th class="text-center"><h4>Engine Number</h4></th>
        <th class="text-center"><h4>Chassis Number</h4></th>
        <th class="text-center"><h4>Brand New</h4></th>
        <th class="text-center"><h4>Account No. (repo)</h4></th>
      </tr>
    </thead>
    <tbody>
   <tr>
        <td align='center'>BARAKO 2</td>    
        <td align='center'>RED</td>
        <td align='center'>100</td>
        <td align='center'>100</td>
        <td align='center'>
        <select class='new' name='brand_new[]'>
            <option>Choose</option>
            <option value='brand_new'>Brand New</option>
            <option value='repo'>Repo</option>
       </select> 
        </td>
          <td> 
          <div id='repo' class='search_item' id='search_item' style='display:none'>    
          <input type='text' name='account_no' required></div>
       </td>
       </tr>
         <tr>
            <td align='center'>BARAKO 2</td>    
            <td align='center'>RED</td>
            <td align='center'>200</td>
            <td align='center'>200</td>
            <td align='center'>
            <select class='new' name='brand_new[]'>
                 <option>Choose</option>
                 <option value='brand_new'>Brand New</option>
                 <option value='repo'>Repo</option>
            </select> 
            </td>
            <td> 
            <div id='repo' class='search_item' id='search_item' style='display:none'>    
            <input type='text' name='account_no' required></div>
            </td>   
             </tr>
             <tr>
              <td align='center'>BARAKO 2</td>  
                <td align='center'>RED</td>
                <td align='center'>300</td>
                <td align='center'>300</td>
                <td align='center'>
                <select class='new' name='brand_new[]'>
                   <option>Choose</option>
                   <option value='brand_new'>Brand New</option>
                   <option value='repo'>Repo</option>
                </select> 
               </td>
                  <td> 
                    <div id='repo' class='search_item' id='search_item' style='display:none'>    
                    <input type='text' name='account_no' required> 
                 </div>
                </td>  
               </tr>
     </tbody>
  </table>

我的问题是只有数据循环的第一行在起作用，而其余的则不在。

Answer 1

关于id的两件事：

1. 一个元素只能有一个id
2. 一个id在页面上只能使用一次

所以这是无效的：

<div id='repo' class='search_item' id='search_item' style='display:none'>    

您所需要使用的只是一个class （仅供参考，最好将display:none添加到样式表中，而不是将其应用于内联，但这取决于您）：

<div class='search_item' style='display:none'>  

更好地设置HTML之后，您可以使用以下JS：

// Search by dates function
var search = $('.new')

search.change(function() {
   var selected = $(this).val();
    if(selected == "repo"){
       $(this).closest("tr").find(".search_item").show(); 
    }else{
       $(this).closest("tr").find(".search_item").hide();
    }

});

您需要导航到$(this)右边的.search_item ，这是选定的下拉列表。 为此，您可以简单地执行以下操作：

$(this).closest("tr").find(".search_item").show();

您也可以这样做：

$(this).parent().next().find(".search_item").show();

但是，如果您要在两者之间添加另一个td或更改标记，它将使脚本失效。 通过向后移动到“最近” tr ，然后下降到.search_item ，可以确保无论添加了额外的标记如何，此代码都将起作用。

小提琴