![](/img/trans.png)
[英]jQuery remove SELECT options based on another SELECT selected on change and on load
[英]jQuery/ Javascript change select options based on selected answer
我有以下代碼:
<table>
<tr><td>Item</td><td>Ranking</td></tr>
<tr><td>Apples</td><td><select id="apple" name="apple">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Oranges</td><td><select id="oranges" name="oranges">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Bananas</td><td><select id="bananas" name="bananas">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Lemons</td><td><select id="lemons" name="lemons">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Limes</td><td><select id="limes" name="limes">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Kiwi</td><td><select id="kiwi" name="kiwi">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
在jsFiddle中: http : //jsfiddle.net/XNYU2/
我試圖了解這是否可行,如果可能,那么jQuery還是Javascript是最佳解決方案,以及如何實現它。
這是一個排名系統,我需要做的很簡單。 如果用戶從任何下拉列表中選擇任何值,則該值需要從其他下拉列表中刪除。 相反,如果用戶隨后取消選擇該值,則需要返回所有下拉列表。
嘗試這個:
$(function() {
$('select').on('change', function(event){ // This binds listeners to the change event on all the select elements
var sId = this.id; // store off the changed element id
var vId = this.value; // store off the changed element value
$('select').each( function(){ // this loops across the same set of elements
if(this.id != sId && this.value == vId) { // If it is not the triggering element and the value is the same, do something
this.options.selectedIndex = 0; // reset the value to 'rank'
}
});
});
});
您可以在jQuery或純js中執行此操作,但是jQuery選擇器可以確保輕松地遍歷元素並只需很少的代碼即可對更改應用操作。
重新閱讀您的問題后,這完成了相同的任務,但略有不同。 用戶被迫只擁有一組沒有重疊的有序排名,但是我們不必去掉刪除/添加選項的麻煩。
是的,這是JavaScript的任務。 jQuery並不是JavaScript的替代品,但基本上是jQuery之上的工具集,它使瀏覽器元素的操作更加容易。 我建議您使用它,即使您需要了解JavaScript基礎才能有效使用它。
這里的關鍵是分解問題。 一種是在更改“選擇”后執行一項操作。 請參閱此處的操作方法: http : //api.jquery.com/change/
第二個動作是實際執行更改,例如,在此處進行描述。 從選擇框中刪除項目
jsFiddle在這里,這是代碼:
var SelectOptions = ['Rank...', 1, 2, 3, 4, 5];
$(document).ready(function () {
$('#TheTable').find('select').change(function () {
var TheSelectedValue = parseInt($(this).val(), 10);
var TheSelectID = $(this).prop('id');
var TheHTML = "";
for (var i = 0; i < SelectOptions.length; i++) {
if (SelectOptions[i] !== TheSelectedValue) {
TheHTML = TheHTML + '<option value="';
TheHTML = (i === 0) ? TheHTML + '#' : TheHTML + SelectOptions[i];
TheHTML = TheHTML + '">' + SelectOptions[i] + '</option>';
}
}
$('#TheTable').find('select').each(function () {
if ($(this).prop('id') !== TheSelectID) {
$(this).html(TheHTML);
}
});
});
});
那只是做到這一點的一種方法:我在幾分鍾內將其放在一起,我敢肯定它可以進行改進,但這應該可以幫助您入門。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.