Javascript 使用jquery从select操作删除项
我正在尝试使用jquery从select中删除一个选项 在我的情况下,我有4个以上的选择项,在某些情况下有10个选择项 我必须实现的情景是: 如果用户从第一个选项中选择Toyota,那么Toyota将从其他三个选项中删除 然后,如果他从第二个选择中选择日产,那么日产也将从其他三个选择中删除,即使是第一个选择 直到最后一次选择时,才会显示一个选项 我试过下面的例子,但不起作用 请帮助我是jquery的初学者Javascript 使用jquery从select操作删除项,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用jquery从select中删除一个选项 在我的情况下,我有4个以上的选择项,在某些情况下有10个选择项 我必须实现的情景是: 如果用户从第一个选项中选择Toyota,那么Toyota将从其他三个选项中删除 然后,如果他从第二个选择中选择日产,那么日产也将从其他三个选择中删除,即使是第一个选择 直到最后一次选择时,才会显示一个选项 我试过下面的例子,但不起作用 请帮助我是jquery的初学者 <!DOCTYPE html> <html> <head&g
<!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>
如果用户从第一个选项中选择,请选择Toyota so Toyota选项
将从其他三个选择中删除
试试这个
以下内容将使用“choisir”选项以及其他选项中未选择的所有选项填充每个选项。因为基础是所有开始选项,所以在另一个文本框中选择另一个选项将重新结束原始选项
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);
});
});
在change事件中,使用var values=selects.mapi,s=>$s.val.get获得一个包含所有值的数组;然后,除触发更改事件的选项外,每个选项都会重新填充所有选项,以确认过滤器oi===0 | | o.value===cur | | values.indexOfo.value====1,其中oi是选项索引,o.value是选项值。换句话说:索引0始终包含在选择的当前值和缓冲值数组之外的所有值中
PS,如果选择可以在运行时填写,那么您只需填写第一个选择,其他选择可以使用这些相同的选项填写,就像在本中所做的那样,问题到底是什么?我在第一个选择中选择了丰田,它从第二个选择中被删除。然后我从第二个选择了日产,它从第一个得到了删除。这不是必须的行为吗
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);
});
});