javascript - 在 jQuery 中单击更改 <select> id

Question

搜索表单中有一个选择选项，它有一个 id(例如 main_cat)。

现在我希望当我点击一个链接('a')时，select 的 id 应该被更改为 second_cat。

Note Give me solution with nesting div classes on jsFiddle, because main_cat id also used in another section on same page

这是我的示例代码:

<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>

When Click on a link main_cat id changed with second_cat

希望你能理解我的问题

Answer 1

我不确定这是否是您的意思，但您可以将点击事件附加到 anchor ，然后在点击时更改新选择的 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>