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

我有一个选择框在页面上使用了很多次

<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在页面上使用了很多次，因此它应该只适用于正在运行的页面

提前谢谢

更新-根据OP的要求 你是不是想做这件事

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

});​

<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>​

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

HTML:

$('.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);

});​

<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>​

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

更新-根据OP的要求 你是不是想做这件事

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

});​

<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>​

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

HTML:

$('.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);

});​

<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>​

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

---

首先，将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>

---

首先，将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>

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>​​​​​​

CSS 只是为了测试

​

演示 可以在这里看到预烘焙的演示：

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>​​​​​​

CSS 只是为了测试

​

演示

---

可以在此处看到预烘焙的演示：

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

---

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

---

非常感谢。是的，没错！但正如我所提到的，站点是多语言的，其值可能在其他语言上，但类必须保留。。那么，如何通过选项编号跟踪选项？非常感谢。是的，没错！但正如我所提到的，站点是多语言的，其值可能在其他语言上，但类必须保留。。那么，如何追踪选项的编号呢？我们肯定是在唱同一首赞美诗！我们绝对是在唱同一首赞美诗！