[英]Remove a dropdown value that has been selected from another dropdown menu
我在网上搜索了一段时间,但仍然找不到答案,我的网站上有三个下拉菜单。
我使用它们来接受用户偏好,以便用户可以控制结果的输出。
所以我想知道是否有可能从其他 2 个下拉列表中取出该值,如果它被选中。
例如,如果用户在第一个中选择电影,则不会在其他人中。
这是我的下拉菜单
<select id="pref1select">
<option value="P">Preference One</option>
<option value="M">Movie</option>
<option value="T">Tv</option>
<option value="G">Games</option>
</select>
<select id="pref2select">
<option value="P">Preference Two</option>
<option value="M">Movie</option>
<option value="T">Tv</option>
<option value="G">Games</option>
</select>
<select id="pref3select">
<option value="P">Preference Three</option>
<option value="M">Movie</option>
<option value="T">Tv</option>
<option value="G">Games</option>
</select>
这将禁用它,但不会删除它。
小提琴: http : //jsfiddle.net/p2SFA/1/
HTML:(添加.preferenceSelect
类)和jQuery
:
$(document).ready(function() { $(".preferenceSelect").change(function() { // Get the selected value var selected = $("option:selected", $(this)).val(); // Get the ID of this element var thisID = $(this).prop("id"); // Reset so all values are showing: $(".preferenceSelect option").each(function() { $(this).prop("disabled", false); }); $(".preferenceSelect").each(function() { if ($(this).prop("id") != thisID) { $("option[value='" + selected + "']", $(this)).prop("disabled", true); } }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <select id="pref1select" class="preferenceSelect"> <option value="P">Preference One</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select> <select id="pref2select" class="preferenceSelect"> <option value="P">Preference Two</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select> <select id="pref3select" class="preferenceSelect"> <option value="P">Preference Three</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select>
如果你想删除它,你可能必须让jQuery
知道在它重置时要插入什么,因为做出了新的选择:)
这应该适合你:
$(document).ready(function() {
$(".preferenceSelect").change(function() {
// Get the selected value
var selected = $("option:selected", $(this)).val();
// Get the ID of this element
var thisID = $(this).attr("id");
// Reset so all values are showing:
$(".preferenceSelect option").each(function() {
$(this).show();
});
$(".preferenceSelect").each(function() {
if ($(this).attr("id") != thisID) {
$("option[value='" + selected + "']", $(this)).hide();
}
});
});
});`
鉴于上面的HTML
,我相信这样的事情可以解决问题:
var $selects = $("select");
$selects.on("change", function(){
var value = this.value;
$("option[value='" + value +"']", $selects).prop("disabled", true);
});
var $selects = $("select"); $selects.on("change", function(){ var value = this.value; $("option[value='" + value +"']", $selects).prop("disabled", true); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="pref1select"> <option value="P">Preference One</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select> <select id="pref2select"> <option value="P">Preference Two</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select> <select id="pref3select"> <option value="P">Preference Three</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select>
这会禁用重复的选项,但删除它们也很容易。 不过,您会遇到一个小问题,因为“首选项 #”选项都具有相同的值。 我建议要么制作这些optgroup
标签,要么完全删除这些值并从一开始就将它们标记为禁用...因为您一开始就不应该单击它们。 您可以在选项标签和分隔符上找到更多信息,请点击此处。
你应该试试这个:
$(".preferenceSelect").on("change", function () {
$(".preferenceSelect option").prop("disabled", false);
var selectPref = $("option:selected", $(this)).val();
var selectId = $(this).prop("id");
$(".preferenceSelect option").each(function () {
$(this).show();
});
$(".preferenceSelect").each(function () {
if ($(this).prop("id") != selectId) {
$("option[value='" + selectPref + "']", $(this)).prop("disabled", true);
}
});
});
这一定适合你。
请尝试以下工作正常且没有问题的方法。 我还将所选选项标记为禁用,而不是从其他下拉列表中隐藏。
$( function() {
courC();
});
function courC(){
var previous;
$(".pSel").on('focus', function () {
previous = this.value;
}).change(function() {
var selected = $("option:selected", $(this)).val();
var thisID = $(this).attr("id");
$(".pSel option").each(function() {
$(this).show();
});
$(".pSel").each(function() {
var otid=$(this).attr("id");
if (otid != thisID) {
if( $('#'+otid).val() == selected){ $('#'+otid).val(''); } // this is required when you are viewing data once again after the form submission
$("option[value='" + selected + "']", $(this)).attr("disabled", true);
}
$("option[value='" + previous + "']", $(this) ).attr("disabled", false); // this will help to reset the previously selected option from all dropdown
});
previous = $('#'+thisID).val();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.