更改 <select> jQuery中单击的ID

Question

搜索表单中有一个选择选项，它具有一个ID（例如main_cat ）。

现在，我希望当我单击链接（'a'）时，应该使用second_cat更改select的ID。

注意给我解决方案，在jsFiddle上嵌套div类，因为main_cat id也在同一页的另一部分中使用

这是我的示例代码：

<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

我不确定您的意思是什么，但是您可以将click事件附加到锚点，然后在单击时通过新的方法更改select的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>