Question

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

我需要创建一个带有选择下拉菜单的网站作为顶部，有几个选项，下面有几个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中动态工作。

提前致谢。

Answer 1

链接：

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

Answer 2

$('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

Answer 3

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

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

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

});

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

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

Answer 4

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

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

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

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

});

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

动态添加选择框中的Class（）

4 个答案: