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

Question

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

这是 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 的问题，这是不允许的。你需要让它们成为类。

并且也给你的故事情节一个类（前故事情节）。

所以选择一些东西

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();