Question

我正在尝试创建一个网页来合并我们数据库中的供应商，并且有一个页面包含两个选择字段，如下所示：

<select name="vendor" id="vendor_select_from">
    <option  value="Apple" id="id0">Apple</option>
    <option  value="Vector Resources, Inc" id="id1">Vector Resources, Inc</option>
    <option  value="Dell, Inc." id="id2">Dell, Inc.</option>
    <option  value="Amazon.com" id="id3">Amazon.com</option>
</select>

基本上，当您在第一个字段中选择一个选项时，应该禁用它或从第二个字段中删除它。我可以通过简单地重新填充列表来解决这个问题，但这对我正在努力实现的目标来说似乎有点过分。话虽这么说，我还没有找到一种方法来使用javascript或jQuery。

Answer 1

在第二个相同的<select>中，我将ID属性更改为以2编号结束。

然后你可以轻松做到这样的事情：

试一试： http://jsfiddle.net/3cVqL/2/

$('#vendor_select_from').change(function() {
    var selected = $(':selected', this)[0].id + 2;
    $('#' + selected).attr('disabled','disabled')
        .siblings().removeAttr('disabled');

    var $select2 = $('#vendor_select_from2');
    if(selected == $(':selected', $select2)[0].id) {
        $select2.val('');
    }
}).trigger('change');

HTML

<select name="vendor" id="vendor_select_from">
    <option  value="Apple" id="id0">Apple</option>
    <option  value="Vector Resources, Inc" id="id1">Vector Resources, Inc</option>
    <option  value="Dell, Inc." id="id2">Dell, Inc.</option>
    <option  value="Amazon.com" id="id3">Amazon.com</option>
</select>

<select name="vendor" id="vendor_select_from2">
    <option  value="Apple" id="id02">Apple</option>
    <option  value="Vector Resources, Inc" id="id12">Vector Resources, Inc</option>
    <option  value="Dell, Inc." id="id22">Dell, Inc.</option>
    <option  value="Amazon.com" id="id32">Amazon.com</option>
</select>

更新：如果两者匹配，则将其更改为清除第二个<select>。

更新：稍微清理一下。

Answer 2

$(document).ready( function() {
    $("#vendor_select_from").change(
    function(){
        // ...Do something with $(this).val()
        $(this).find("option[value='"+$(this).val()+"']").remove(); // This will remove the selected option from the select widget
    });
});

Answer 3

$('select[id=select1]').change(function()
{
    $('select[id=select2] option').attr('disabled', false);
    $('select[id=select2').find("option[value=$('select[id=select1]').val()]").attr('disabled', true);
});

注意：无需验证。您可能希望添加验证，如果元素是否存在。

HTML选择字段更新另一个

3 个答案: