Select2更改attr在第二選擇

如何在第一個<select>中選擇相同的值時在第二個<select>中更改<option>的屬性？Select2更改attr在第二選擇

更具體地說：當我在我的第一個<select>中選擇一個選項時，應禁用第二個<select>中的相同選項。

$("body").on("select2:select", "#first", function(e) { 
 
    var cur_id = e.params.data.id; 
 
    $("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled"); 
 
    $("#second").trigger('refresh'); 
 
    $("#first").trigger('refresh'); 
 
}); 
 

 
$("body").on("select2:select", "#second", function(e) { 
 
    var cur_id = e.params.data.id; 
 
    $("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled"); 
 
    $("#second").trigger('refresh'); 
 
    $("#first").trigger('refresh'); 
 
});

<body> 
 
    <select id="first" name="first"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    </select> 
 
    
 
    <select id="second" name="second"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    </select> 
 
</body>

來源

2016-05-12 user4301988

對於SELECT2版本> = 4.0.0

解決方案：

$("select").val("1").trigger("change");

來源

2016-05-12 10:13:15 Sapotero

不，這個val必須被禁用，但沒有被選中。 – user4301988

$("body").on("change", "#first", function(e) {//use change event 
 
    var cur_id = $('option:selected',this).val();//get value of selected option 
 
    console.log(cur_id); 
 
    $(this).siblings("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option 
 
}); 
 

 
$("body").on("change", "#second", function(e) {//use change event 
 
    var cur_id = $('option:selected',this).val();//get value of selected option 
 
    console.log(cur_id); 
 
    $(this).siblings("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <select id="first" name="first"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    </select> 
 
    
 
    <select id="second" name="second"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    </select> 
 
</body>

來源

2016-05-12 10:20:34 guradio

這是一個consise的方式來做到這一點。

$("select#first").on("change", function() { 
 
    $("select#second option").each(function() { 
 
    if ($("select#first option:selected").val() === $(this).val()) $(this).prop("disabled", true); 
 
    else $(this).prop("disabled", false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <select id="first" name="first"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    </select> 
 
    
 
    <select id="second" name="second"> 
 
    <option value="1" disabled="disabled">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    </select> 
 
</body>

您可能要自動選擇（踢）另一種選擇太在你的第二，當用戶選擇了在第二select選擇的選項中進行選擇。如果這是有道理的:-)

來源

2016-05-12 11:32:38 PinkTurtle

Select2更改attr在第二選擇

回答

相關問題