Question

搜索表单中有一个选择选项，它有一个id（例如main_cat）。现在我希望当我点击链接（'a'）时，应该使用second_cat更改select的id。注意给我在jsFiddle上使用嵌套div类的解决方案，因为main_cat id也用在同一页面上的另一个部分中这是我的示例代码：＆lt; div class =“widget widget_vehicle_search”＆gt; ＆lt; div class =“search-form-widget”＆gt; ＆lt; form id =“wp-advanced-search”name =“wp-advanced-search”class =“wp-advanced-search”method =“”action =“”＆gt; ＆lt; div id =“wpas-main_cat”class =“wpas-main_cat wpas-generic-field wpas-field”＆gt; ＆lt; div class =“label-container”＆gt; ＆lt; label for =“main_cat”＆gt;选择A制造商：＆lt; i class =“icon-help-circled-1 tooltip”＆gt;＆lt; / i＆gt;＆lt; / label＆gt; ＆LT; / DIV＆GT; ＆lt; select id =“main_cat”name =“main_cat”＆gt; ＆lt; option value =“any”＆gt;任何制造商＆lt; /选项＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆LT; /形式＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; 单击链接时，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>

在jQuery中单击更改<select> id

1 个答案: