根据所选选项的数量添加一个类

Question

我在页面上使用了很多次选择框。

<div class="some-div">
    <a class="maybe">Maybe</a>
    <select class="selectclass">
        <option>Maybe</option>
        <option>Yes</option>
        <option>No</option>
    </select>
</div>

我如何使用jQuery根据所选选项的数量向“a”元素添加一个类？该类必须不是取值，因为该网站是多语言的，但是从选项的数量：'可能'代表第一名，“是”代表第二名，“否”代表第三名。 select在页面上多次使用，因此它只适用于正在运行的那个。

提前致谢！

Answer 1

更新 - 符合OP的要求

您是否尝试按照DEMO

中的内容进行操作

<强> jQuery的：

$('.selectclass').change(function(){

    var number = $(this).val();
    var value = $("option^[value=" + number + "]").text();

    $(this).parent().find('a').html(value);    
    $(this).parent().find('a').attr('class', 'opt' + number);

});​

<强> HTML：

<div class="some-div">
    <a class="opt1">Maybe</a>
    <select class="selectclass">
        <option value="1">Maybe</option>
        <option value="2">Yes</option>
        <option value="3">No</option>
    </select>
</div>​

<强> CSS：

.opt1{ color:blue; }
.opt2{ color:green; }
.opt3{ color:red; }​

Answer 2

首先将HTML更改为使用选项“value”属性，这样您就不会关心多语言架构。

<div class="some-div">
<a class="maybe">Maybe</a>
<select class="selectclass">
    <option value="1">Maybe</option>
    <option value="2">Yes</option>
    <option value="3">No</option>
</select>

绑定到ddl更改方法并使用jquery查找ddl的值。

$('.selectclass').bind("change", function() {  
var option = $(this).val();
if (option == 1)
{
//your code
}
else if...
});

Answer 3

HTML

为您的选项添加一些值...

<div class="some-div">
    <a class="maybe">Maybe</a>
    <select class="selectclass">
        <option value="maybe">Maybe</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>
</div>​​​​​​

Javascript（jQuery）

选择器必须在实际代码中更具体，以避免冲突......

// add a `change` event to the select element
​$("select").on("change",function(){
    // get the value of the select element
    var val = $(this).val()
    // remove all classes from the `a` tag  and add the
    // recently got value as a class of the `a` tag
    $("a").removeClass().addClass(val)
})​​​​​​​​​

CSS

仅供测试...

.no{
    color: red;
}
.yes{
    color: green;
}

.maybe{
    color: orange;
}
​

演示

预烘焙演示可以在这里看到：http://jsfiddle.net/uBCJd/

Answer 4

这将为您提供所选选项的索引，并更改链接的类和文本     

$(".selectclass").live("change",function(){
    var index = $(this).children("option:selected").index() + 1;
    $(this).parent().find('a').text(index+':'+$(this).val());
    $(this).parent().find('a').attr('class',index);
});​