使用其属性获取元素？

Question

我有这个,

<select id="rid" style="border: 1px solid #ccc;" name="rid">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

我有这个触发事件的链接,

<a href="#">Disable Option 1</a><br />
<a href="#">Disable Option 2</a><br />
<a href="#">Disable Option 3</a>

现在,如果我单击Disable Option 1,这将禁用Option 1选择下拉列表.我在想,通过使用该属性value,我可以指定禁用哪个选项关于我将点击的链接,但我迷路了.如何使用value属性禁用下拉列表中的任何选项？

Answer 1

编辑:

例如,当单击禁用选项1时,它将禁用选项1,4和5,当我单击禁用选项2时,它将禁用选项2和3,有点像这样.

设置链接如下,

<a href="#" data-val="1,4,5">Disable Option 1</a><br />
<a href="#" data-val="2,3">Disable Option 2</a><br />
<a href="#" data-val="3">Disable Option 3</a>

并改变如下代码,

$('a').click (function () {
    var thisVal = $(this).data('val')+'';
    $('#rid option').filter(function () {            
        return $.inArray(this.value, thisVal.split(',')) >= 0;
    }).prop('disabled', true);
});

演示: http ://jsfiddle.net/vPhJc/1/

如果您设置如下链接,

<a href="#" data-val="1">Disable Option 1</a><br />
<a href="#" data-val="2">Disable Option 2</a><br />
<a href="#" data-val="3">Disable Option 3</a>

然后你可以

$('a').click (function () {
    $('#rid option[value=' + $(this).data('val') + ']').prop('disabled', true);
});

演示: http ://jsfiddle.net/vPhJc/