Блог

У меня есть одно окно поиска. При нажатии на это окно поиска я должен отобразить выпадающий список как Бангалор, ченнаи, Хайдарабад. Затем, нажав на Бангалор, мне нужно скрыть первый выпадающий список и отобразить выпадающий список с мартахалли, корамангала.

Как только я нажимаю на Bangalore, заполнитель должен измениться на bangalore, а в другом выпадающем списке должны отображаться marthahalli, koramangala.

кто-нибудь может подсказать мне по этому поводу. Вот код выпадающих списков, как я их отображаю.

 <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();  
});
  

Попробуйте этот способ

 $('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);
    }

});
  

ДЕМОНСТРАЦИЯ