从选项到span CSS类的值

我一直试图让这个工作几天了……令人大吃一惊。 我不是JavaScript / jQuery AT ALL的专家，所以放轻松，哈哈。 😉

我有9个值的下拉列表。 我也有一个类设置为’option0’的span。 下拉显然具有从1到9的值。我想在更改下拉列表时更改跨度的类。 如果使用下拉列表并选择了选项5，我希望跨度具有类’option5’。

这样做的最佳方式是什么？

感谢您的阅读，希望很快能收到您的回复。 C：

Answer 1

$('select').change(function(){ var val = $(this).val(); alert(val); $('span').removeAttr('class').addClass('option' + val); }) 

http://jsfiddle.net/SAy7W/1/

Answer 2

  Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8 Option 9  option0​ $('#your_select').on('change', function() { var value = $('option:selected', this).text().replace(/Option\s/, ''); $('#slave').removeClass().addClass('option' + value).text('option' + value) });​   Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8 Option 9  option0​ $('#your_select').on('change', function() { var value = $('option:selected', this).text().replace(/Option\s/, ''); $('#slave').removeClass().addClass('option' + value).text('option' + value) });​ 

工作演示1

如果您select如下：

  Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8 Option 9  option0 

然后

 $('#your_select').on('change', function() { var value = this.value; $('#slave').removeClass().addClass(value).text(value) });​ 

工作演示2

Answer 3

HTML：

 ​ Content 1 Content 2 Content 3 Content 4 Content 5 Content 6 Content 7  ​option0​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

jQuery的：

 ​$('#master').change(function() { var selected = $(this).val(); $('#slave').removeClass().addClass('option' + selected); });​​​ 

CSS：

 ​.option​0 { background-color: red; } .option1 { background-color: green; } .option2 { background-color: brown; } .option3 { background-color: yellow; } .option4 { background-color: blue; } ... 

在这里查看一个实例

或者，如果要在选项标记之间包含任何内容，请应用自定义属性“data-position”并使用此jQuery：

 $('#master').change(function() { var selected = $('#master option:selected').attr('data-position'); alert(selected); $('#slave').removeClass().addClass('option' + selected); });​ 

请在此处查看更新的实时示例