Question

我一直试图让这个工作几天了......令人大吃一惊。我不是JavaScript / jQuery AT ALL的专家，所以请轻松一下，哈哈。 ; - ）

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

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

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

Answer 1

<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)
});

<强> Working Demo 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)
});

<强> Working Demo 2

Answer 2

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

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

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;
}

...

查看实时示例here

或者，如果您想在选项标签之间添加任何内容，请应用自定义属性“data-position”并使用此jQuery：

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

查看更新的实时示例here

从<select>选项到span CSS类</select>的值

3 个答案: