根据用户的决定禁用选定的选项

Question

我正在尝试为用户创建一个开放的环境来选择特定的选项，同时让他们有机会以任何顺序选择它们，同时消除他们已经选择的选项。到目前为止，我的代码在乱序执行时让我停滞不前。基本上 select 和选项会在一个范围内弹出。他们选择一个。结果在该范围内交付，出现相同的选项，但删除了他们已经选择的选项。

这是HTML代码

<div><select id="lies">
<option value="" selected='selected'>Select a lie...</option>
<option value="FBI">We're undercover agents</option>
<option value="super">We're superheroes</option>
<option value="confess">We're the bombers</option>
</select></div>

<span id='FBI'>
<p>"We're undercover students working with the FBI," you say.</p>
<p>"Get outta here before I put you both in cuffs!" he yells.</p>
<p>"Good job, <?php echo $_GET['Name']?>! You almost got us busted.."   </p>
<p>"Come on, Korra, let's try one more! Over there!" you exclaim.</p>
<div><select id="lies">
<option value="" selected='selected'>Select a lie...</option>
<option value="FBI">We're undercover agents</option>
<option value="super">We're superheroes</option>
<option value="confess">We're the bombers</option>
</select></div>
</span>

<span id='super'>
<p>"Let us through, we're bulletproof!" you fearlessly say.</p>
<p>"Are ya now?" asks the cop as he lightly bops you over the head with his fist.</p>
<p>"OW!" you yell.</p>
<p>"Run along and go play somewhere else, stupid kid!"</p>
<p>You and Korra walk away feeling defeated.</p>
<p>"Any other ideas, <?php echo $_GET['Name']?>?" she asks.</p>
<p>"One more try!" you say as you run over to another police officer.</p>
<div><select id="lies">
<option value="" selected='selected'>Select a lie...</option>
<option value="FBI">We're undercover agents</option>
<option value="super">We're superheroes</option>
<option value="confess">We're the bombers</option>
</select></div>
</span>

<span id='confess'>
<p>"It was us!"</p>
<p>"Alright off to jail you go!" says the officer.</p>
You get escorted off to jail. THE END.
</span>

这里是 jQuery

//Keeps the spans containing the respondes hidden until an option is selected for the lietocops page

$('#lies').change(function(){
var contact = $(this).val();

// Hides the list / show list

if ( contact == ""){
 $('#lies').show();
}else{
$('#lies').hide();
}

$("#lies option:selected").attr('disabled','disabled')
    .siblings().removeAttr('disabled');

// lie responses

if( contact == "FBI") {
 $('#FBI').fadeIn();
}else if( contact == "super") {
 $('#super').fadeIn();
}else if( contact == "confess") {
 $('#confess').fadeIn();
 }
});

Answer 1

首先，您有多个 ID 的问题，这是不允许的。你需要让它们成为 classes.

并为您的故事情节也添加 class（前故事情节）。

所以在选择一些东西时

var $lies = $(".lies");
$lies.change(function(){
$("#firstLie").hide();
var $this = $(this);
var contact = $this.val();
var $currentStoryline = $this.closest(".storyline");
var $selectedOptions = $(".lies").find("option[value='" + contact + "']");
$selectedOptions.prop("disabled", true);    
$lies.val("");
$currentStoryline.fadeOut();
$("#" + contact).fadeIn();

根据用户的决定禁用选定的选项

Disable selected options based on the user's decision

html

jquery

select

options