动态添加选择框中的Class()

时间:2012-05-31 19:20:03

标签: jquery css dynamic drop-down-menu

希望这不是一个重复的问题,但如果是,请将链接发布为您的回复。

我需要创建一个带有选择下拉菜单的网站作为顶部,有几个选项,下面有几个div,里面有几个链接。

根据您在选择框中选择的选项,标记为正确的链接将突出显示。

这是基本结构:

<select>
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
  <option value="o4">Option 4</option>
</select> 

<div>
  <a href="#" class="o1">Link A</a>
  <a href="#" class="o2">Link B</a>
  <a href="#" class="o3">Link C</a>
  <a href="#" class="o4">Link D</a>
</div>

<div>
   <a href="#" class="o1">Link A</a>
   <a href="#" class="o2">Link B</a>
   <a href="#" class="o3">Link C</a>
   <a href="#" class="o4">Link D</a>
</div>

我知道这个过程将包含.addClass()。removeClass()和.change(),我只是不确定如何将它们放在一起以便它可以在所有div中动态工作。

提前致谢。

4 个答案:

答案 0 :(得分:3)

链接:

$('select').on('change', function(){
    var klass = this.value;
    $('.highlight').removeClass('highlight');
    $('a.'+klass).addClass('highlight');
});

答案 1 :(得分:1)

$('select').on('change', function() {      // binding change event for select
                                           // fires when select box change

  var mycls = this.value;                  // getting the value of select 
                                           // box after change



  $('a:not(".'+ mycls +'")')               // select <a> tag that has no 
                                           // class same as select box value
              .removeClass('some_class');  // and remove highlight 
                                           // class form that <a>

  $('a.' + mycls)                          // select the <a> with class 
                                           // same as select box value
             .addClass('some_class');      // and adding highlight class
});

最初制作链接突出显示只是触发初始更改

$('select').on('change', function() {
  var mycls = this.value;
  $('a:not(".'+ mycls +'")').removeClass('some_class');
  $('a.' + mycls).addClass('some_class');
}).change(); // here the initial change event triggered

<强> DEMO

答案 2 :(得分:0)

好像你已经回答了最后一句中的问题,但这是下一步。

您必须将.change()事件处理程序添加到选择框中。

$("select").change(function () {

});

然后,即使发生这种情况,也请阅读所选值,因为您将它们命名为相同值,然后将该样式应用于该类。

$("select").change(function () {
    $( "." + $(this).attr("value") ).css("background", "#ccc");
}

答案 3 :(得分:0)

假设您为选择列表指定了一个ID,例如SELECTID 你有一个叫做.highlight的课,你可以这样做:

$('#selectid').change(function(){

  $('*').removeClass('highlight');

  $('.'+$(this).val()).addClass('highlight'); 

});

我没有对上述内容进行测试,但它应该让你走上正轨。