HTML选择字段更新另一个

我想创建一个网页，在我们的数据库合并供应商和有两个选择字段这样的页面：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>

基本上，当你在第一选择一个选项字段，它应该被禁用或从第二个字段中删除。我可以通过简单地重新填充列表来解决这个问题，但是这似乎对我正在努力完成的任务大有裨益。话虽如此，我还没有找到一种方法来使用JavaScript或jQuery。

来源

2010-07-28 dciliske

在您的第二个相同的<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>

更新：改变它来清除日e第二<select>如果两者匹配。

更新：清理了一些东西。

来源

2010-07-29 00:03:15 user113716

谢谢，这正是我想要做的。 – dciliske 2010-07-29 19:57:03

@游泳 - 不客气。请记得点击此答案旁边的复选标记以确认您已“接受”该答案。：O） – user113716 2010-07-29 20:07:18

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

来源

2010-07-29 00:00:05 Strelok

我不确定这是什么OP后，如果目标是不允许两次选择相同的选项......这将从第二个下拉列表中删除选项一个接一个，他们wouldn一旦第一个选择发生变化，就不会再出现:) – 2010-07-29 00:02:38

从字符串中将选择器放在一起也很冒险。如果其中一个值具有''''，\或其他选择器特殊/无效字符，则会出现问题。 – bobince 2010-07-29 00:24:32

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

注意：不验证。您可能想要添加验证，如该元素是否存在。

来源

2010-07-29 01:06:48

HTML选择字段更新另一个

回答

相关问题