use jquery to manipulate delete item from select
Question
I am trying using jquery to delete an option from select,
In my case I have more than 4 select items (in some case 10 select) The scenario that I have to achieve is:
If a user select from the first select the option Toyota so Toyota will be deleted from the three other select
Then if he chooses Nissan from the second select so Nissan will be also deleted from the three other select even the first Until the last select will show just one option
I have tried the example below it didn't work http://jsfiddle.net/rooseve/PGqv7/3/ Please help I am beginner with jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans titre</title>
<script type="text/javascript">
$( function(){
var sel1 = $('#first'), sel2 = $('#second');
//get the options value/text of some selection
/**
* get the options value/text map of some select element
*
* @param sel
* a select element
*
*
* @return {val1:txt1, val2:txt2....}
*/
function getSelOptions(sel) {
var opts = {}, tmp;
for ( var i = 0, len = sel.options.length; i < len; i++) {
tmp = sel.options[i];
opts[tmp.value] = tmp.text;
}
return opts;
}
/**
* Reset the select element's options
*
* @param sel
* the select element
* @param newOptions
* the new options map
* @param except
* the option value which will be excluded
*/
function setOptionsExcept(sel, newOptions, except) {
//remember the current select value
var curSel = sel.options[sel.selectedIndex].value;
//clear the select options
sel.options.length = 0;
for ( var k in newOptions) {
//this one should be excludeed
if (k != "none" && k == except)
continue;
//add to the option list
sel.options.add(new Option(newOptions[k], k, false, k == curSel));
}
}
//remember the options map
var opts1 = getSelOptions(sel1.get(0)), opts2 = getSelOptions(sel2.get(0));
sel1.change(function() {
//sel1 value
var val = $(this).val();
if (val == "none") {
//as sel1 is none, reset sel1
setOptionsExcept(this, opts1);
}
//reset sel2, but no sel1 value
setOptionsExcept(sel2.get(0), opts2, val);
});
sel2.change(function() {
//sel2 value
var val = $(this).val();
if (val == "none") {
//as sels is none, reset sel2
setOptionsExcept(this, opts2);
}
//reset sel1, but no sel2 value
setOptionsExcept(sel1.get(0), opts1, val);
});
}
</script>
</head>
<body>
<table>
<tr>
<td><select id="first" required>
<option value="">choisir</option>
<option value="Profconf">Professeur de Conférence</option>
<option value="ProfEnsgSup">Professeur d'enseignement supérieur</option>
<option value="ProfAssistant">Professeur Assistant</option>
<option value="ProfAdjoint">Professeur Adjoint</option>
</select>
<input type="hidden" name="designationtypecadre1" value="Professeur_checheurEquivalent "/>
</td>
</tr>
<tr>
<td><select id="second" >
<option value="">choisir</option>
<option value="Profconf">Professeur de Conférence</option>
<option value="ProfEnsgSup">Professeur d'enseignement supérieur</option>
<option value="ProfAssistant">Professeur Assistant</option>
<option value="ProfAdjoint">Professeur Adjoint</option>
</select>
<input type="hidden" name="designationtypecadre2" value="Professeur_checheurEquivalent"/>
</td>
</tr>
<tr>
<td><select id="third" >
<option value="">choisir</option>
<option value="Profconf">Professeur de Conférence</option>
<option value="ProfEnsgSup">Professeur d'enseignement supérieur</option>
<option value="ProfAssistant">Professeur Assistant</option>
<option value="ProfAdjoint">Professeur Adjoint</option>
</select>
<input type="hidden" name="designationtypecadre3" value="Professeur_checheurEquivalent"/>
</td>
</tr>
</table> </body>
</html>
2 answers
solution1
0 2016-03-10 11:28:52
If a user select from the first select the option Toyota so Toyota will be deleted from the three other select
try this, demo
$( '#first, #second, #third, #fourth' ).change(function(){
//get the selected text
var selectedText = $(this).find(":selected").html();
$( '#first, #second, #third, #fourth' ).not($(this)).each( function(){
$(this).find("option").each( function(){
if ( $(this).html() == selectedText )
{
$(this).remove();
}
});
} );
});
solution2
0 2016-03-10 17:17:31
The following will fill each select with the 'choisir' option as well as with all options not selected in the other selects. Because the base is all start options, choosing another option in another textbox will reappend the original option
var selects = $('select'), // or $('#first, #second, #third'), but better would be to use a class
alloptions = $('#first').children().clone();
selects.change(function(){
var values= selects.map((i,s) => $(s).val()).get();
selects.not(this).each((si,s)=>{
var cur = $(s).val();
$(s).empty()
.append(alloptions
.filter((oi, o)=> oi === 0 || o.value === cur || values.indexOf(o.value) === -1).clone())
.val(cur);
});
});
in the change event, an array with all values is obtained with var values= selects.map((i,s) => $(s).val()).get(); Then each Select except the one that triggered the change event is refilled with all options that confirm to the filter oi === 0 || o.value === cur || values.indexOf(o.value) === -1 oi === 0 || o.value === cur || values.indexOf(o.value) === -1 oi === 0 || o.value === cur || values.indexOf(o.value) === -1 , where oi is the option index and o.value the option value. In other words: index 0 is always included (choisir), the current value of the select and all values not inside the buffered values array
PS, if the selects can be filled in runtime, you only have to fill the first select and the other selects can be filled with those same options, as done in this fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.