我一直在试图得到这个工作了几天现在..大吃一惊。 我不是的JavaScript / jQuery的专家可言，这样下去容易，哈哈。 ;-)
我有9个值下拉。 我也有一个跨度设置为“option0”一类。 下拉显然有值的范围从1到9。我希望在下拉列表改变以及改变跨度的类。 如果使用下拉选项和5中选择，我想跨度有类“选项5”。
什么是这样做的最佳方式？
感谢您的阅读，希望能尽快从你们那里听到的。 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:
<select id="your_select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
</select>
<span id="slave" class="option0">option0</span>
$('#your_select').on('change', function() {
var value = $('option:selected', this).text().replace(/Option\s/, '');
$('#slave').removeClass().addClass('option' + value).text('option' + value)
});
工作演示1
如果你select像以下：
<select id="your_select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
</select>
<span id="slave" class="option0">option0</span>
然后
$('#your_select').on('change', function() {
var value = this.value;
$('#slave').removeClass().addClass(value).text(value)
});
工作演示2
Answer 3:
HTML：
<select id="master">
<option>Content 1</option>
<option>Content 2</option>
<option>Content 3</option>
<option>Content 4</option>
<option>Content 5</option>
<option>Content 6</option>
<option>Content 7</option>
</select>
<span id="slave">option0</span>
jQuery的：
$('#master').change(function() {
var selected = $(this).val();
$('#slave').removeClass().addClass('option' + selected);
});
CSS：
.option0 {
background-color: red;
}
.option1 {
background-color: green;
}
.option2 {
background-color: brown;
}
.option3 {
background-color: yellow;
}
.option4 {
background-color: blue;
}
...
看到一个活生生的例子在这里
另外，如果你想拥有的选项标记之间的任何内容，应用自定义属性“数据位”，并使用此jQuery的：
$('#master').change(function() {
var selected = $('#master option:selected').attr('data-position');
alert(selected);
$('#slave').removeClass().addClass('option' + selected);
});
看到一个更新的活生生的例子在这里
文章来源: Value from
