Question

我有一个搜索框。在那个搜索框的Onclick我必须显示下拉列什，钦奈，海德拉巴。然后点击班加罗尔我需要隐藏第一个下拉菜单并显示与marthahalli，koramangala的下拉列表。

当我点击班加罗尔时，占位符应该像班加罗尔一样改变，而另一个下拉列表应该显示为mahahanga，koramangala。

任何人都可以就此提出建议。这是一个下拉列表如何显示iam的代码。

<div>
<a>
    <input type="text" placeholder="search" />
</a>
<ul class="dropdown" id="dropdownhide">
    <li>
        <a>
           <span id="bangdropdown">Bangalore</span>
        </a>
    </li>
     <li>
         <a>
             <span>Chennai</span>
         </a>
     </li>
      <li>
          <a>
             <span>Hyderabad</span>
          </a>
      </li>
 </ul>
<ul class="menu" id="menu">
     <li>
        <a>
           <span>marthahalli</span>
        </a>
    </li>
    <li>
        <a>
           <span>koramangala</span>
        </a>
    </li>   
</ul>

</div>

这是jquery代码，

$('#bangdropdown').click(function(){
    $('#placeholderchange').attr('placeholder' , 'Bangalore');
    $('#dropdownhide').hide();
    $('#menu').show();  
});

Answer 1

试试这种方式

$('input:text').click(function () {
    if ($('#menu').is(':visible')) {
        $('input:text').attr('placeholder', 'Search');
        $('#menu').slideUp(1000);
        $('#dropdownhide').slideDown(500);
    } else {
        $('#dropdownhide').slideDown(500);
    }
});
$('#dropdownhide li').on('click', function () {
    if ($(this).find('a span').text() == 'Bangalore') {
        $('input:text').attr('placeholder', 'Bangalore');
        $('#dropdownhide').slideUp(500);
        $('#menu').slideDown(1000);
    }

});

DEMO

jquery显示两个下拉菜单

1 个答案: