在多个选择中,使所选选项统一
In several selects make selected options uniq
我有个问题,你需要在哪里找到俄语和英语的成对单词
<div class="form-group" id="question4">
<label for="q4FirstSelectEN">4</label>
<div class="row">
<div class="col-lg-offset-2 col-lg-2 q4EN">
<select name="firstSelectEn" id="q4FirstSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4SecondSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4ThirdSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
</div>
<div class="col-lg-2 q4RU">
<select name="firstSelectRu" id="q4FirstSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4SecondSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4ThirdSelectRU">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
</div>
</div>
</div>
例如,当用户在内部(div class='q4EN')的(select)中选择"红色"时,在此(div class=q4EN)中的所有剩余选择中选择的"红色"选项将变为不可选择
(nonSelectable是css中的类,带display:none)
当用户更改决策并在第一个(选择)中选择"绿色"而不是"红色"时,红色在其余选择中可用,绿色变为不可选择
当所有3个选择都有其值时,用户不能更改任何
我的js不起作用,我没有主意
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select")
.not(this)
.find("option:selected")
.addClass("nonSelectable");
});
我认为问题出在操作顺序上。
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select") //Finds all select lists
.not(this) //Finds all except the one just changed
.find("option:selected") //Finds selected of all except the one just changed
.addClass("nonSelectable"); //Wont do anything because nothing was selected
});
尝试以下操作:
$(".q4EN").find("select").change(function() {UpdateOptions();});
function UpdateOptions(){
var ss = $(".q4EN").find("select");
ss.find('option').prop("disabled", false); //Enable all before disabling selected
ss.each(function () {
var s = $(this).val();
if(s != undefined && s != "") {
ss.find("option[value=" + s + "]").prop("disabled", true);
}
});
}
这是实现所需内容的另一种方法。它基本上遍历每个select元素,找到相应的选项并禁用它
$('select').find("option").addClass("selectable");
$('select').on("change",function()
{
// $(this).find("option").prop("disabled",false); // uncomment this if you wish to reset the disabled selection
var $thisId = this.id;
var $selectedOption = $(this).find("option:selected").val();
$('select').each(function()
{
if(this.id !== $thisId)
{
// $(this).find("option").removeClass("non-selectable").addClass("selectable"); // uncomment this if you wish to reset the disabled selection
$(this).find("option[value=" + $selectedOption + "]").prop("disabled",true).addClass("non-selectable").removeClass("selectable");
}
});
})
https://fiddle.jshell.net/a2n234eq/4/
要针对特定组(如EN和RU),请将$('select')
更改为$('.q4EN select')
相关文章:
- 使用此选项选择父类内部的类
- 更新:仅根据单选按钮和所选选项选择特定项目
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- ng-单击在IE中不起作用的选项选择Angularjs
- 从选项选择中删除值
- On为<选项>选择等效项
- 用户界面先前选择的选项选择更改
- 使用ng重复或ng选项和删除空白选项选择长方体角度
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 输入:选中,选项:选择选择器
- 根据使用angularjs从下拉菜单中选择的选项选择适当的复选框
- 如何根据 html 中的选项/选择重定向用户(单击按钮后)
- 使用ng选项选择中的ng选项进行过滤器下拉列表
- 如何设置选项选择的值
- 如何搜索长下拉选项/选择列表
- jQuery - 根据下拉选项选择列出结果
- 从选项选择单击时打开 2 个 URL
- 在 Angular JS 中为 ng 选项选择默认值
- 下拉选项选择的操作
- 通过单击单选按钮清除所有选项选择条目