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選擇字段更新另一個

回答

相關問題