選擇處理onchange事件

Question

我有兩個選擇菜單。當我從一個選擇中選擇一個選項時，另一個選擇的值應分別更改爲「選擇字母」或「選擇數字」。

我試圖在兩個選擇上設置onchange事件，它的工作原理，但只有第一次更改後。例如，當我在「選擇字母」菜單中選擇選項「A」後，選擇「選擇數字」中的某個選項時，「選擇字母」值將設置爲「選擇字母」，就像我想要的那樣。但是當我再次做同樣的操作時，它不起作用。

<select id="sel_letter"> 
     <option value="x">Select Letter</option> 
     <option value="a">A</option> 
     <option value="b">B</option> 
     <option value="c">C</option> 
    </select> 

    <select id="sel_num"> 
     <option value="x">Select Number</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 

JS：

$('body').on('change', '#sel_letter', function (event) { 
     var selected_op = $('#sel_num').find("option[value=x]"); 
     selected_op.attr("selected", true); 
    }); 

    $('body').on('change', '#sel_num', function (event) { 
     var selected_op = $('#sel_letter').find("option[value=x]"); 
     selected_op.attr("selected", true); 
    }); 

Answer 1

的select元素只需使用.val()，將值設置爲x。 jQuery將爲您完成剩下的工作。

$('body').on('change', '#sel_letter', function() { 
 
    $('#sel_num').val('x'); 
 
}); 
 

 
$('body').on('change', '#sel_num', function() { 
 
    $('#sel_letter').val('x'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="sel_letter"> 
 
    <option value="x">Select Letter</option> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c">C</option> 
 
</select> 
 

 
<select id="sel_num"> 
 
    <option value="x">Select Number</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select>

只使用一個事件兩個它甚至可能。如果這些是靜態元素，則不需要委派。只有例如：

$('#sel_letter, #sel_num').on('change', function(e) { 
    $($(e.target).is('#sel_letter') ? '#sel_num' : '#sel_letter').val('x'); 
}); 

Answer 2

您還可以使用.not(selector)

案例1：概括爲所有選擇標籤

$('select').on('change', function(e) { 
    $('select').not($(this)).val('x'); 
}); 

案例2：如果你想要做的話，基於id然後y你可以使用以下方法。

$('#sel_letter, #sel_num, #sel_alpha').on('change', function(e) { 
    $('#sel_letter, #sel_num, #sel_alpha').not($(e.target)).val('x'); 
}); 

siblings

$(this).siblings().val('x'); 

$('#sel_letter, #sel_num, #sel_alpha').siblings().not(this).val('x'); 

//.not(selector) used 
 
$('#sel_letter, #sel_num, #sel_alpha').on('change', function(e) { 
 
    $('#sel_letter, #sel_num, #sel_alpha').not(this).val('x'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="sel_letter"> 
 
    <option value="x">Select Letter</option> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c">C</option> 
 
</select> 
 

 
<select id="sel_num"> 
 
    <option value="x">Select Number</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 

 
<select id="sel_alpha"> 
 
    <option value="x">Select Alpha</option> 
 
    <option value="1">ABC1</option> 
 
    <option value="2">XYZ2</option> 
 
    <option value="3">PQR3</option> 
 
</select>