Изменить <select> id on click in jQuery

Question

В форме поиска есть опция выбора, и она имеет идентификатор (например, main_cat).

Теперь я хочу, чтобы при нажатии на ссылку ('a') идентификатор select должен быть изменен с помощью second_cat.

Примечание Дайте мне решение с гнездовыми Дивыми классами на jsFiddle, потому что main_cat идентификатора используется также в другом разделе на тот же странице

Вот мой пример код:

<div class="widget widget_vehicle_search"> 
    <div class="search-form-widget"> 

     <form id="wp-advanced-search" name="wp-advanced-search" class="wp-advanced-search" method="" action=""> 
      <div id="wpas-main_cat" class="wpas-main_cat wpas-generic-field wpas-field"> 
       <div class="label-container"> 
        <label for="main_cat">Select A Manufacturer:<i class="icon-help-circled-1 tooltip"></i></label> 
       </div> 

       <select id="main_cat" name="main_cat"> 
        <option value="any">Any Manufacturer</option> 
       </select> 

      </div> 
     </form> 
    </div> 

</div> 

Когда Нажмите на ссылку main_cat id изменено с помощью second_cat

Надеется, что вы понимаете мой вопрос

Answer 1

Я не уверен, если это то, что вы имеете в виду, но вы можете прикрепить нажмите событие, чтобы закрепить затем по щелчку изменить атрибут избранных id по новому:

$('a').on('click', function(){ 
    $('#main_cat').prop('id', 'second_cat'); 
}) 

Надеюсь, это поможет.

$('a').on('click', function(e){ 
 
    e.preventDefault(); 
 
    
 
    console.log('Before : '+$('select').prop('id')); 
 
    
 
    $('#main_cat').prop('id', 'second_cat'); 
 
    
 
    console.log('After : '+$('select').prop('id')); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="widget widget_vehicle_search"> 
 
    <div class="search-form-widget"> 
 

 
    <form id="wp-advanced-search" name="wp-advanced-search" class="wp-advanced-search" method="" action=""> 
 
     <div id="wpas-main_cat" class="wpas-main_cat wpas-generic-field wpas-field"> 
 
     <div class="label-container"> 
 
      <label for="main_cat">Select A Manufacturer:<i class="icon-help-circled-1 tooltip"></i></label> 
 
     </div> 
 

 
     <select id="main_cat" name="main_cat"> 
 
      <option value="any">Any Manufacturer</option> 
 
     </select> 
 

 
     </div> 
 
    </form> 
 
    </div> 
 
</div> 
 

 
<br> 
 
<a href='#'>change select id</select>